CODEWITHSUNDEEP
javascriptjquery
J. Doe43
J. Doe43

Reputation: 207

jQuery Datatable on click tr function fires multiple times

When I select a row on the table, then click my "Add row" button, one row is added. I then click on another row, then click "Add row", it adds two rows. Every time I click on another row, the number of rows added goes up as well. How do I make it so only one row is added every time?

I'm pretty sure its due to a click event inside of another click event but I'm not sure how to fix that issue.

My current event adding rows:

$(document).on('click', 'tr', function() {
    var t = $('#data-table').DataTable();
    $('#data-table').dataTable();


    $('#addbtn').on( 'click', function () {
        t.row.add( [ 
            'New Group'
         ] ).draw( false );

    } );

} );

Upvotes: 1

Views: 1839

Answers (1)

Ziya ERKOC
Ziya ERKOC

Reputation: 839

Try this:

$(document).on('click', 'tr', function() {
 var t = $('#data-table').DataTable();
 $('#data-table').dataTable();


 $('#addbtn').on( 'click', function () {
    t.row.add( [ 
        'New Group'
     ] ).draw( false );
    //This removes the listener when you are done with it
    //And it will create another when you click again
    $( "#addbtn").off( "click" );

 });
});

or you could basically move that addbtn listener out of tr listener
Hope these work!

Upvotes: 2

Related Questions