Événement de changement ne se déclenche pas pour les cases à cocher lorsque la tabulation est modifiée

Question

J'ai deux onglets un appelé Sale-Items et les autres All-Items et pour chaque onglet est un div associé avec une liste de cases à cocher. Le premier onglet par défaut qui est sélectionné fonctionne lorsque je clique sur la case à cocher et il alerte lorsque coché ou décoché, mais lorsque je clique sur l'autre onglet, les cases à cocher pour cet onglet apparaissent lorsque je coche ou décoche les éléments il n'alerte pas ou ne remplit pas le tableau. Est-ce que quelqu'un sait comment je peux résoudre ce problème. J'ai commenté mon code vérifier.

JavaScript:

var data = [];  
var tab = '<%= (Request.QueryString["tab"] == null ? "All-Items" : Request.QueryString["tab"]) %>'  

// this function changes the the selected tab but when I click the checkbox 
// associated with the tab it doesn't alert or fill the data array 
$('ul.tabs .tab a').click(function (e) {    
    if (!$(this).hasClass('selected')) { 
     tab = $(this).attr('href').split('#')[1]; // change the tab here for the checkbox change event 
     alert(tab); 
     if ($('#' + tab).find(':checkbox').length > 1) { 
      $(this).parent().addClass('selected').siblings('li').removeClass('selected'); 
      $('#filter-tab-categories').show(); 
      $('#' + tab).show(); 
      $('.filters-panel').find('.filter-wrapper').not('#' + tab).hide(); 
      data = []; 
      $('#' + tab + ' input:checkbox:checked').each(function() { 
       data.push({ 'Name': $(this).val(), 
         'Count': $(this).parent().siblings('td').find('a span').text() 
       }); 
      }); 
      // getProducts(data, department, "0", "2", category); 
     } else { 
      $('#filter-tab-categories').hide(); 
     } 
    } 
    $('.console').html(data.join(',').toString()); 
    e.preventDefault(); 
});  

// prblem here when I click the tab and then click a checkbox doesn't alert 
// but it does for the first tab(default) selected which is All-Items 
// so All-Items div always alerts for the associated checkbox not for the selected tab or next tab 
$('#' + tab + ' input:checkbox').change(function() { 
    alert(tab); 
    if ($(this).is(':checked')) { 
     data.push({ 'Name': $(this).val(), 
      'Count': $(this).parent().siblings('td').find('a span').text() 
     }); 
    } else { 
     for (var i = 0; i < data.length; i++) { 
      if (data[i].Name == $(this).val()) { 
       data.splice(i, 1); 
      } 
     } 
    } 
    $('.console').html(data.join(',').toString()); 

}); 

HTML:

<ul class="tabs"> 
    <li class="tab"><a href="#Sale-Items">Sale Items</a></li>   
    <li class="tab"><a href="#All-Items">All Items</a></li> 
</ul> 

<div class="filters-panel"> 
    <span id="LeftNav_lblFilterCategory" class="filters-category">Filters: 
    <span style="color:#0066cc; font-weight:normal">Desktop Computers</span></span> 
    <div id="Sale-Items" class="filter-wrapper" style="display:none"> 
     <div class="filter-group"> 
      Brand</div> 
     <div class="filter-box"> 
      <table border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td class="filter"> 
         <input name="filter1" type="checkbox" value="Acer" /></td> 
        <td> 
         <a class="filter-name" href="#">Acer(<span>1</span>)</a></td> 
       </tr> 
       <tr> 
        <td class="filter"> 
         <input name="filter2" type="checkbox" value="Compaq" /></td> 
        <td> 
         <a class="filter-name" href="#">Compaq(<span>1</span>)</a></td> 
       </tr> 
      </table> 
     </div> 
    </div> 
    <div id="All-Items" class="filter-wrapper" style="display:block"> 
     <div class="filter-group"> 
      Brand</div> 
     <div class="filter-box"> 
      <table border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td class="filter"> 
         <input name="filter8" type="checkbox" value="Acer" /></td> 
        <td> 
         <a class="filter-name" href="#">Acer(<span>4</span>)</a></td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</div> 

Answer 1

Cette ligne:

$('#' + tab + ' input:checkbox').change(function() { ... }); 

est seulement d'enregistrer l'événement change pour input s en dessous de l'onglet par défaut (le changement de variable tab n'enregistre pas automatiquement la gestion des événements ers pour commutées)

Je vous conseille d'utiliser simplement le nom de classe commune pour enregistrer des gestionnaires d'événements "onglets.":

$('.filter-wrapper input:checkbox').change(function() { ... }); 

Code Mise à jour:http://jsfiddle.net/ZmWpR/