奇怪的复选框点击功能问题答案

【问题标题】：Strange checkbox click function issue奇怪的复选框点击功能问题
【发布时间】：2012-02-15 14:42:52
【问题描述】：

使用数据表。问题是$('.checkbox') click 功能仅适用于数据表的第一页，其他任何地方都没有。请注意，$('#check_all') 适用于每一页。

JS 看起来是这样的：

function changeQt(){
    if($('#quantity').is(':hidden'))            
        $('#quantity').fadeIn("slow");
    $('#quantity').animate({
        borderColor: "#00a9e0"
    }, 'fast').text(totalqt).delay(400).animate({
        borderColor: "#fff"
    }, 'fast');    
    
    
}

function doIt(obj) {
    if ($(obj).is(":checked")) {
        $(obj).closest("tr").not('#hdr').addClass("row_selected");
        totalqt=totalqt + parseInt($(obj).closest("tr").find("#qt").text(), 10);        
    }
    else {
        $(obj).closest("tr").not('#hdr').removeClass("row_selected");
        totalqt=totalqt - parseInt($(obj).closest("tr").find("#qt").text(), 10);
        if(totalqt<0) totalqt=0;
    }
}



function checkAllCheckboxes(isChecked) { 
    if(isChecked ){ 
        totalqt=0; 
    } 
    $('.checkbox').each(function(){ 
        $(this).prop('checked', isChecked); 
        doIt(this); 
    }); 
    changeQt(); 
} 

$(document).delegate('td.item_id', 'click', function(e){ 
    e.stopPropagation(); 
}); 
$(document).delegate('#list > tbody > tr', 'click', function(){ 
    window.open($(this).attr("url")); 
});

$(document).ready(function() {
    $("input:submit, input:reset").button();
    $.datepicker.regional[""].dateFormat = 'dd.mm.yy';
    $.datepicker.setDefaults($.datepicker.regional['']);
        
    $('select[name=list_length]').change(function(){
        if ($('#check_all').is(':checked'))
            $('#check_all').click();   
    });

    var oTable= $('#list').dataTable( {       
        "bJQueryUI": true, 
        "iDisplayLength": 25,
        "aaSorting": [],
        "aoColumns": [ 
        {
            "bSortable": false
        },
        null, null, null,null,null, null, null
        ]    
    } ).columnFilter({
        sPlaceHolder: "head:before",
        aoColumns: [    null, null, null,null,null, null, null,
        {
            type: "date-range"
        }
        ]

    });
    

    
    $('.checkbox').click(function(e) {
        e.stopPropagation();
        doIt(this);
        changeQt()
       
    });
     
    $('select[name=list_length]').change(function(){ 
        if($('#check_all').is(':checked')){ 
            $('#check_all').prop('checked', false); 
            checkAllCheckboxes(false); 
        } 
    }); 

    $('#check_all').click(function(){ 
        checkAllCheckboxes(this.checked); 
    }); 
 });

这是该表中的 1 行：

<tr url="?page=item&id=1411">

<td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="1411" class="checkbox"/>    1411</td>
<td> 9814</td>
<td style="text-align:center">BK</td>
<td style="text-align:center">36</td>
<td style="text-align:center" id="qt">1</td>
<td style="text-align:center">15</td>
<td style="text-align:center">12</td>
<td>15.02.2012</td>

</tr>

如果有人想查看实际页面，请加入讨论：Here。

【问题讨论】：

标签： javascript jquery checkbox click datatables

【解决方案1】：

我假设 dataTables 正在从 DOM 中添加/删除元素，并且与它们一起使用的事件处理程序将附加到它们。

不要通过快捷方式（例如click()，或blur()）附加事件，只有当相关元素在页面加载时可用时，使用delegate()（或jQuery 1.7+中的on()）

$("#list").delegate('.checkbox', 'click', function(e) {
    e.stopPropagation();
    doIt(this);
    changeQt()
});

jQ 1.7+

$("#list").on('click', '.checkbox', function(e) {
    e.stopPropagation();
    doIt(this);
    changeQt()
});

【讨论】：

【解决方案2】：

关于活动的常见问题解答将在此处对您有所帮助：http://datatables.net/faqs#events。它还包括如何应用解决方案的示例。在这种情况下，我建议使用：

table.$('.checkbox').click(function(e) {

其中 table 是 DataTables 实例。 $ API 方法将为您提供一个 jQuery 对象，该对象将对表中的所有行进行操作，而与当前分页无关。

【讨论】：