click function gets called multiple times

skenney_yub

Hi All,

I am calling a function from a cell click and it works fine. However, each time I send it a new data set (destroy = true), it holds onto all previous click events. So, for example if I click row 4 my function is called. If I then do a new search and get a new resultset and I click row 7, my function is called twice - the first time with the data from row 4 (which is likely not even in the current resultset) and then it is called again with data from row 7. If I do this again, then my function is called 3 times, etc...

I've tried to clear out everything I can think of, but I cannot stop this from happening. stopPropagation and stopImmediatePropogation prevent the multiple calls, but the first call is not the correct one, so that doesn't help.

All thoughts appreciated!

let self = this;

$(document).ready(function() {

      var cmeTable = $('#example').DataTable( {
          select: 'single',
          data: data, 
          destroy: true,
          "columns": [
              { data: 'ce_date' },
              { data: 'description' },
              { data: 'accreditor' },
              { data: 'hours_total' },
              { data: 'approval' },
              { data: 'doc_exists' },
              {
                  "class": "dt-view",
                  "orderable": false,
                  "data": null,
                  "defaultContent": "<button>View</button>"
              } 
          ],
          "initComplete": function () {
            $('#example tbody').on( 'click', 'tr td.dt-view', function (e) {

                const clickedElement = $(e.target);
                var tr = clickedElement.closest('tr');
                var row = cmeTable.row(tr);
                var record = row.data();

                self.updateDocument(record);

            } ); 
          }
      } );
    } );

kthorngren

You will probably want to turn off the event before turning it on. Something like this:

      "initComplete": function () {
        $('#example tbody')
           .off()
           .on( 'click', 'tr td.dt-view', function (e) {
 
            const clickedElement = $(e.target);
            var tr = clickedElement.closest('tr');
            var row = cmeTable.row(tr);
            var record = row.data();
 
            self.updateDocument(record);
 
        } );
      }

skenney_yub

Thank you. I learned a lot in the process, but you do not want to know how much time I burned working on that one. Sincerely grateful.

spencersullivan

@ kthorngren - Thank you!

However, WHY is this? seems incredible that this is the answer and the entire developer community just accepts this as Okey Dokey... Is there any reference to this being necessary outside of this blog?

kthorngren

@spencersullivan

However, WHY is this?

The OP is creating an event on the tbody that is outside of Datatables knowledge. When Datatables is destroyed it will remove the events it has created but it doesn't remove the tbody nor any tbody events it hasn't created. The OP is recreating the Datatable which recreates that same event. If the original event isn't removed then an additional event will be created when Datatables is initialized. This is not a Datatables specific issue if that is what you are inferring.

Is there any reference to this being necessary outside of this blog?

You can see the behavior here:
http://live.datatables.net/bunakoye/1/edit

Its not using Datatables but creating 2 click events on the table > tbody > tr. Similar to the OP code. You will see two console.log outputs for 1 click.

Here is the documentation for jQuery .on().

Kevin