Button inside Jquery Datatables with x-on:click fire three times in a row.

[edy-tanto]

Link to test case:
https://codepen.io/ed_tanto/pen/abNpbQv?editors=1111

Description of problem:
I try to implement datatables inside Alpine JS component, I create a button for each row and add event listener using "x-on:click". The problem happen when I try to click the button, it fires the method three times. I try to dive into what happen and the clue I got is related with Datatables Orthogonal Data (my assumption because datatables render multiple source of data and create multiple buttons too), I also manually set the data-search, data-filter, data-sort but doesn't seem to make any effect. I also try to use "onclick" as event listeners and it works fine (only fire once for each click).

So, is there any clues what actually happen with datatables and Alpine?

Thank you all

[KevinBatdorf]

You can defer Alpine with some code, and initialize Datatables in there. It's using an undocumented feature so know that it can change in the future without warning (or just constrain your Alpine version).

const alpine = window.deferLoadingAlpine || ((alpine) => alpine())
window.deferLoadingAlpine = function (callback) {
  alpine(callback)
  $( "#the-table" ).DataTable()
}

it needs to run before you load in the Alpine script, see here:

https://codepen.io/KevinBatdorf/pen/KKzaKOY

[edy-tanto]

Hi, thank you @KevinBatdorf for replying my question.

I tried the defer Alpine and it was working perfectly fine for the first time initialization. But when I destroy the datatables and reinitialized it again, the behavior came back and even worst (the click event keep adding everytime reinitialized is done - 4, 7, 10, ... times).

I also tried this code

var theTable;

const alpine = window.deferLoadingAlpine || ((alpine) => alpine())
window.deferLoadingAlpine = function (callback) {
  alpine(callback)
  theTable = $( "#the-table" ).DataTable()
}

function destroyAndReinitialize()
{
  theTable.destroy();
  window.deferLoadingAlpine();
}

but seems like, the window.deferLoadingAlpine is working for the first time Alpine load.

Right now, I create a "proxy button" outside datatables that will attach to "x-on:click". So in the datatables, I do this:

<button onclick="hitProxyButton()">Fire Click!</button>

and outside the datatable:

<div style="display: none;">
  <button id="proxy-button" x-on:click="fireClick()">
</div>

It's working as expected, but maybe I'll change the approach with how I interact with the datatable. If there any advises for me I'll be very happy to hear about it. :D