simple-datatables icon indicating copy to clipboard operation
simple-datatables copied to clipboard

eventlisteners not working

Open kemmotar1 opened this issue 4 years ago • 4 comments

I added an event listener to a button in a cell, but the event is never triggered. The table is being rendered inside a swal2 modal, and it works when I remove the datatables. Once the modal is rendered I do a querySelectorAll and then a foreach to do addEventListener("onclick", () => {}) on each element.

kemmotar1 avatar Nov 11 '21 18:11 kemmotar1

I added an event listener to a button in a cell, but the event is never triggered. The table is being rendered inside a swal2 modal, and it works when I remove the datatables. Once the modal is rendered I do a querySelectorAll and then a foreach to do addEventListener("onclick", () => {}) on each element.

Facing the same issue, any solution yet?

proffnick avatar Dec 15 '21 09:12 proffnick

I ended up doing:

   datatable.on('datatable.init', function (){
      var buttons = document.querySelectorAll('.dataTableParent button')
      buttons.forEach(function(button) {
        button.addEventListener('click', function (){
          ... your button action here
        })
      })
    })

I'm also not sure of any other way around this.

raicabogdan avatar Dec 30 '21 12:12 raicabogdan

I ran into this issue as well trying to use HTMX on an rendered inside the data table. Took me awhile to figure out that the issue was not my HTMX but the event triggering for the data table itself. It works fine once I remove the datatable. I will try the work arounds above as well as look deeper intot the simiple datatables code to see if I can find a more general solution.

jasonlotz avatar Jan 11 '22 17:01 jasonlotz

Any workaround for this?

suhailkc avatar Jul 06 '22 07:07 suhailkc

Welp! Was trying to make a NuxtJS module out of this and ran into this issue.

Any help/ideas on how we can fix this? @johanneswilm

BayBreezy avatar Nov 07 '22 18:11 BayBreezy

Yeah, I don't think that is easily solvable like that. I would put the event listeners on an element outside the table l, wait for the event to bubble and then find the original element using event.target.

That may mean that it's not really compatible with some frameworks like react &co.

johanneswilm avatar Nov 07 '22 19:11 johanneswilm

Ohhh. Ok, thanks 😄

BayBreezy avatar Nov 07 '22 19:11 BayBreezy