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

Strange checkbox click function issue

本文关键字：功能 问题 复选框      更新时间：2023-09-26

使用数据表。问题是$('.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); 
    }); 
 });

这是该表中的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>

如果有人想查看正在运行的页面，请加入讨论：此处。

我假设dataTables正在从DOM中添加/删除元素，并且会附带事件处理程序。

使用delegate()（或jQuery 1.7+中的on()），而不是通过快捷方式（如click()或blur()）附加事件（仅当页面加载中有问题的元素可用时才起作用）

$("#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()
});

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

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

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

相关文章：