Strange checkbox click function issue

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.

Rory McCrossan · Accepted Answer · 2012-02-15 14:58:38Z

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

answered Feb 15, 2012 at 14:58

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Allan Jardine · Accepted Answer · 2012-02-15 16:13:03Z

0

The FAQ about events will be of some use to you here: http://datatables.net/faqs#events . It also includes examples of how to apply the solution. In this case I would suggest using:

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

where table is the DataTables instance. The $ API method will give you a jQuery object that will operate on all rows in the table, regardless of current paging.

answered Feb 15, 2012 at 16:13

Allan Jardine

5,5315 gold badges33 silver badges34 bronze badges

Collectives™ on Stack Overflow

Strange checkbox click function issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related