26

I have a jQuery link that runs on a dynamic list for each row when the hyperlink is clicked.

This works before datatables is applied, but once datatables is applied the 11th row (after changing display to higher than the default 10) or when on another page, the jQuery is no longer called.

I tried throwing this in a jsFiddle and it works there, so I can't reproduce it in a jsFiddle for some reason.

Any pointers in the right direction would be very much appreciated.

PHP:

echo "<table id='paginatedTable'>";
echo "<thead><th>Test1</th><th>Test2</th></thead><tbody>";
foreach($array as $arr){
 echo "<tr><td>" . $arr['test1'] . "</td><td><div class='test'>";
 echo "<a href='#' class='toggleTest' data-id='". $arr['id']."' id='test-" . $arr['id'] . "'>" . $arr['test2'] . "</a>";
 echo "</div></td></tr>";
}
echo "</tbody></table>";

jQuery

$(function(){
    $('.test').on('click', '.toggleTest', function(e){
        var id = $(this).data('id');
        $("#test-"+id).html("Done");
        return false;
    });
});

$(document).ready(function() {
    $('#paginatedTable').dataTable();
} );
Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
Andrew
  • 4,443
  • 5
  • 33
  • 75

4 Answers4

63

You need to bind the handler to a static element, not the rows that can be added dynamically. So it should be:

$("#paginatedTable").on("click", ".test .toggleTest", function ...);
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • That did the trick, I thought it had to be the parent element, but any static element that wraps it seems to work! Thanks a ton. I'll accept the answer when the timer allows – Andrew Aug 20 '14 at 21:38
  • I was thinking that hover would be the same but I'm struggling with it. Any suggestions there? – Andrew Aug 21 '14 at 00:18
  • 2
    Hover is special because it's not really an event. It's just a shorthand for defining handlers for `mouseenter` and `mouseleave` in one place. When using `.on`, you have to do this explicitly. – Barmar Aug 21 '14 at 00:34
  • `mouseenter` and `mouseleave` in different functions worked perfectly. Thanks again! – Andrew Aug 21 '14 at 17:16
  • Thanks. Works for me. – Muhammad Azeem Sep 12 '17 at 17:06
6

I have followed the reply from @Barmar.

along with that, i have wrapped the on click into the document.ready function, then it worked for me.

$(document).ready(function() {

$('#dmtable tbody').on( 'click', 'tr td.details-control', function () {

}
} );
Raghu
  • 1,363
  • 1
  • 23
  • 37
3

There are a few things that can go wrong here:

  • Your event binding is on elements that get replaced, you should use something like:
    $('#paginatedTable').on('click', '.toggleTest', function(e){
  • You don't seem to be escaping your html so data could possibly break it:
    htmlspecialchars($arr['test2'])
    (instead of just $arr['test2'], could apply to other variables as well)
jeroen
  • 91,079
  • 21
  • 114
  • 132
2

Another easy solution I just found is to just add a function that uses a component handler to upgrade the DOM on any DataTables redraw.

Can be used like: 

$(document).ready(function(){
    var table = $('#table-1').DataTable({ 
        "fnDrawCallback": function( oSettings ) {
            componentHandler.upgradeDOM();
        }
    });
});

It solved my pagination issues when I was using a dropdown in one of the columns.

Shahzad Barkati
  • 2,532
  • 6
  • 25
  • 33
David Hagan
  • 1,156
  • 12
  • 23