@click event not firing inside element manipulated by JQuery.

[pervertedpokepuffs]

I seem to have this issue where events are not firing, but only with buttons within a table that has been manipulated by JQuery (am using datatables.net). I am also using AlpineJS alongside Laravel Livewire and Blade. Below is about everything I know.

Expected behavior:
I click on the update button, the click event is emitted and runs the openModal() function.

Actual behavior:
Clicking the update button does not trigger anything. Checking using the AlpineJS Devtools and manually toggling showModal state makes the modal appear/disappear.

Workarounds:

1. The workaround used was to simply downgrade to V2.8.2 similar to OP.
2. Datatables.net added pagination to the table. Changing pages (and changing the elements of the table) apparently made the buttons work as expected.
3. Took out the use of JQuery altogether. Regardless of whether the JQuery was in a addEventListener('load', ...) or in an x-init block, it will break the update button. Removing the JQuery code fixed the problem.

Browsers tested on:

• Firefox 89.0.2 (64-bit)
• Chrome 91.0.4472.124 (Official Build) (64-bit)

The html:

<div class="table-responsive-lg">
    <table id="some-table" class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">No.</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Filename</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Updated</th>
                <th></th>
            </tr>
        </thead>

        <tbody class="bg-white divide-y divide-gray-200">
            @foreach ($models as $index=>$item)
            <tr class="bg-emerald-200">
                <td class="px-6 py-4 whitespace-nowrap">{{$index+1}}</td>
                <td class="px-6 py-4 whitespace-nowrap">{{$item->name}}</td>
                <td class="px-6 py-4 whitespace-nowrap">{{$item->filename}}</td>
                <td class="px-6 py-4 whitespace-nowrap">{{$item->updated_at}}</td>
                <td class="no-sort"><button @click="openModal()" class="bg-blue-500 hover:bg-blue-700 text-white p-2 rounded">Update</button></td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div class="flex flex-wrap p-4 h-full items-center">
        <div class="overflow-auto" style="background-color: rgba(0,0,0,0.5); position: fixed;" x-show="showModal" :class="{ 'absolute inset-0 z-10 flex items-center justify-center': showModal }">
            <div class="bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg py-4 text-left px-6" x-show="showModal" @click.away="showModal = false" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90">
            <!-- Content -->
        </div>
    </div>
</div>

The JQuery:

window.addEventListener('load', function() {
    $(document).ready(function() {
        $('#some-table').DataTable({
            columnDefs: [{
                targets: 'no-sort',
                orderable: false
            }]
        });

        $(".dataTables_length select").css('width', '4rem');
    });
});

x-data:

{
      showModal: false,
      openModal() {
          this.showModal = true;
      }
}