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.

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. e.g.

$('.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

how about bind the onclick event to upper dom element (.e.g. table itself, or body element, instead of the buttons themselves? $(document.body).on( "click", ".row_button", function() { //... }); — Phuong Nguyen
– Phuong Nguyen, Commented Aug 13, 2014 at 2:16
only the first page rows are bound to an event and not the whole dataset — user782104
– user782104, Commented Aug 13, 2014 at 2:44

user782104 · Accepted Answer · 2014-08-13 03:16:59Z

2

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

answered Aug 13, 2014 at 3:16

user782104

13.6k61 gold badges179 silver badges316 bronze badges

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

Comments

user782104 · Accepted Answer · 2014-08-13 02:58:42Z

0

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

answered Aug 13, 2014 at 2:58

user782104

13.6k61 gold badges179 silver badges316 bronze badges

Collectives™ on Stack Overflow

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

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