Question

Using datatables. The problem is $('.checkbox') click function only works on first page of datatables, nowhere else. Note that, $('#check_all') works on every page.

JS looks like that:

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); 
    }); 
 });

Here is 1 row from this table:

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

If someone want to see page in action, please join discussion: Here.

Answer 1

I assume dataTables is adding/removing elements from the DOM, and with them will go the event handlers attached to them.

Instead of attaching events by the shortcuts (eg click(), or blur()) which will only work when the element in question is available on page load, use delegate() (or on() in jQuery 1.7+)

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