Why my data is multiplicated

tsurubaso

Link to test case:

    ////and the function
    function mouseDownCountryList(){
        table=undefined;
        table = $('#searchTable').DataTable();

        $('#searchTable tbody').on( 'click', 'button', function () {

            console.log( table.row($(this).parents('tr') ).data() );    
        } );
    };

//////

Debugger code (debug.datatables.net):
No Debugger
Error messages shown:
No error
Description of problem:

All work well, I obtain the desired data, no errors, but the data is duplicated each time I click.
Here is a visual example.

I am sure this is a simple an obvious problem but I can't find a way to solve it.

kthorngren

Each time you call mouseDownCountryList() you are adding an additional click handler ($('#searchTable tbody').on( 'click') to the button. Place this code outside the mouseDownCountryList() function so it executes only once

        $('#searchTable tbody').on( 'click', 'button', function () {
 
            console.log( table.row($(this).parents('tr') ).data() );   
        } );

Kevin

tsurubaso

Thanks!!! I understand the situation. I suppose we add the listeners and after that we triggers them when clicking. Will try...

tsurubaso

Ok, I just restarting to learn datatable, I avoid the problem by triggering an event that erase everything, then no more duplication problem. I know it's not clean... but It works.

tsurubaso

Andddddd I am back.
Having fun with this wonderful library.
I have my Covid data application and now I add to it World Bank Indicators data.
I put everything in a table.
Pushing a button retrieve the wanted data but I have the same problem like above, and this time I will try at first not to erase everything as a solution.
If you have some advice in order not to add each time you click a listener it will be great!
Have a nice day!

tsurubaso

////////////// action sur la table World Bank Data
function mouseDownworldBankData(event){

$('#worldBankData tbody').one( 'click', 'button', function () {
    var tr = $(this).closest("tr"); 
    var data = $("#worldBankData").DataTable().row(tr).data();
    console.log(data[0]);
    //window.electron.ipcRendererWithValue('Manip1',data[0]);
} );

};

Found the solution!!!!!!
here is the reference.
https://datatables.net/reference/api/one()

terribly simple, I replaced on() by one().

working like a charm!!!!

Hopping this will help others.

allan

That will do it - nice one and thanks for posting back.

Allan