@click event not firing inside element manipulated by JQuery.

[pervertedpokepuffs]

Discussed in #1755

^{Originally posted by pervertedpokepuffs July 9, 2021}
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;
      }
}
```</div>

[warkior]

Is there a simple workaround to this? I'm experiencing the same problem. I have a table, rendered with DataTables which I want to put an open/close style area into for a certain column. The x-show stuff seems to work, but not the @click.

[ekwoka]

This should work fine, as Alpine watches for any changes to the Dom.

On a side note I don't think support for integrating with outdated poor quality software is really in the cards.

[delordemm1]

you saying datatables is an "outdated poor quality software"?

[delordemm1]

removing

    $(document).ready(function() {
        
    });

worked for me just now, i was having the same issue

[electronbabies]

removing

    $(document).ready(function() {
        
    });

worked for me just now, i was having the same issue

Why does this fix this? This is insane to me, but thank you

[ekwoka]

You're already waiting long enough. Should remove the window listener too, in fact.

But it mostly has to do with the jquery moving the elements in a way that causes Alpine to lose track of them.

[electronbabies]

Haha, I genuinely can't believe I got a reply. Thank you too!