Problem to work jquery code in Datatables responsive

Question

I create a datatable with DataTables and my datatable has 29 columns. When I select responsive true and create last column of rows a button to show a dialog, button not work but when I set button in first column of rows its work!

My jquery file:

(function ($) {

    $('button').on('click', function () {
        alert('WOHOOO Work');
     })

    $('table').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'copy', 'excel', 'print',
    ],
    responsive: true,
} );

})(jQuery);

When I cleck responsive button (+), jquery build a <tr class="child">, and my code not work because in first of load page my button not build. How can I fix this?

IceCode · Answer 1 · 2020-01-28T08:15:25.010

0

Instead of:

$('button').on('click', function () {
    alert('WOHOOO Work');
 });

Try the following code:

$(document).on("click", ".child", function() {
    alert("added button clicked");
});

edited Jan 28 '20 at 08:15

answered Jan 28 '20 at 07:53

IceCode

1,466
13
22

Not work. with this code when I click on my page alert show! – Jan 28 '20 at 08:01
sorry about that. It should be without the `$()` I have edited my answer. – IceCode Jan 28 '20 at 08:15
You can read about event delegation here: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – IceCode Jan 28 '20 at 08:17

score 0 · Answer 2 · answered Jan 28 '20 at 08:08

0

You can use this code:

$(document).on('click', ('.child button.btn-class'), function() {
    alert('WOHOOO Work');
});

This work in your button that has "btn.class" class.

answered Jan 28 '20 at 08:08

Problem to work jquery code in Datatables responsive

2 Answers2