jquery - 更改选项卡时，不会触发复选框的更改事件

Question

我有两个选项卡，一个称为“销售项目”，另一个称为“所有项目”，每个选项卡都有一个带有复选框列表的关联 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注册change事件(tab变量更改不会自动注册事件处理程序切换“选项卡”。)

我建议简单地使用通用类名来注册事件处理程序:

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

更新的代码: http://jsfiddle.net/ZmWpR/