For the jquery plugin datatables, why the click event not functioning?

Question

I am using datatables, it is easy and powerful tool to generate table using jquery

The reference link is here: You can simply try at that website too.

https://datatables.net/

The problem is , For example, I have a table with 20 rows. If it show 10 row per page, there are two pages. And for each row , there is a button, and I capture the click event on that button. eg

$('.row_button').on('click',function()){
....
});

The problem is , for the first page buttons the click event can be trigger but for the other page it doesn't , simply nothing response the script has no error in the chrome developer. I think the page navigation button affect the click event . but How to fix it? thanks

Answer 1

Besides the answer above , in fact the offical has already have this answer

Most common FAQs

Q. My events don't work on the second page

A. When attaching events to cells in a table controlled by DataTables, you need to be careful how it is done. Because DataTables removes nodes from the DOM, events applied with a static event listener might not be able to bind themselves to all nodes in the table. To overcome this, simply use jQuery delegated event listener options, as shown in this example. Additionally, you could use my Visual Event bookmarklet to help debug event issues.

reference: http://datatables.net/faqs/#events

 $('#example tbody').on('click', 'tr', function () {
        var name = $('td', this).eq(0).text();
        alert( 'You clicked on '+name+'\'s row' );
    } );

elegant and works

Answer 2

After some searching, I manage to get a ugly solution , it seems the problem is caused by each page is dynamic add to page, however, the jquery "on" is not working and I have no idea about it. Finally this code is works.

   $('#data_table').dataTable({
            "fnDrawCallback": function() {
                $('.showDetail').unbind('click');
                $('.showDetail').on('click', function() {
                ...........
                });
            }
        });