タブが変更されたときにチェックボックスのイベントが変更されない

Question

私は2つのタブをセールアイテムと呼び、他のすべてのアイテムはタブごとにチェックボックスのリストを持つ関連するdivです。 最初にチェックボックスをオンにすると、チェックボックスをオンにするとチェックボックスがオンまたはオフになっていますが、他のタブをクリックすると、チェックボックスをオンまたはオフにしたときにそのタブの チェックボックスが表示されます。アラートや配列を埋めることはありません。誰もが私はこの問題を解決する方法を知っていますか？ 私のコードがそれをチェックアウトするコメントをしました。

は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

このライン：

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

のみデフォルトのタブの下にinput S（tab変数変更するchangeイベントを登録しています自動的にイベントハンドラを登録しません切り替えのためのERS）

私は単純にイベントハンドラを登録するには、共通のクラス名を使用することをお勧めします「タブ。」：

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

更新コード：http://jsfiddle.net/ZmWpR/