jQuery Datatable on click tr function fires multiple times

Question

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 );

    } );

} );

Ziya ERKOC · Accepted Answer · 2017-07-11 22:24:41Z

2

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!

edited Jul 11, 2017 at 22:24

answered Jul 11, 2017 at 21:45

Ziya ERKOC

8297 silver badges19 bronze badges

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

9 Comments

J. Doe43 Over a year ago

Hmmm, still having the same problem unfortunately

Ziya ERKOC Over a year ago

I have updated the code would you use $( "#addBtn").detach( "click" ); instead

J. Doe43 Over a year ago

No change unfortunately.

Ziya ERKOC Over a year ago

or this $('#addBtn').off('click'); I am looking through jQuery document sorry for mistakes

J. Doe43 Over a year ago

No worries, I appreciate the help anyway! Still having same problem with off.

|

Collectives™ on Stack Overflow

jQuery Datatable on click tr function fires multiple times

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related