Question

使用数据表。问题是$('.checkbox')点击功能仅适用于数据表的第一页，而不是其他地方。请注意，$('#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); 
    }); 
 });

此表格中有一行：

<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。

Answer 1

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

不是通过快捷方式附加事件（例如click()或blur()），而只有当有问题的元素在页面加载时可用时，才使用delegate()（或{{ 1）}在jQuery 1.7 +）

on()

jQ 1.7+

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

Answer 2

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

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

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

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

2 个答案: