Alpine.js 和 jQuery DataTables，x-on：在表内触发时单击功能不全

Question

我的 Laravel 和 Alpine.js 刀片页面中有此表。

<table id="projects-table">
    <thead>
        <tr>
            <th>name</th>
            <th>actions</th>
        </tr>
    </thead>
    <tbody>
    @foreach($projects as $project)
        <tr>
            <td>{{ $project->name }}</td>
            <td><button x-data="{}" x-on:click="$dispatch('open-modal', 'edit-project')">edit</button></td>
        </tr>
    @endforeach
    </tbody>
</table>

有了它，我有了这个 JavaScript 代码，可以将其转换为 jQuery DataTable

document.addEventListener('DOMContentLoaded', function () {
    new DataTable('#projects-table');
});

现在发生的情况是，当我单击

button

 内的 

td

时，我的模式不会触发

当表不是 DataTable 时，一切正常。

基本上发生了什么（可能），当 jQuery 操作元素时，@click 事件不会触发。有任何已知的修复方法吗？感谢所有帮助。

Answer 1

解决方案是将表包含在由 Alpine 控制的标签中，并在 Alpine 启动后初始化 DataTable：

<div x-data>

   <table id="projects-table">
   
      <!-- ..... -->

   </table>

</div>

<script>
   document.addEventListener('alpine:init', () => {
       new DataTable('#projects-table')
   });
</script>

通过这种方式，Alpine 可以检测到 DOM 何时被 DataTables 更改，然后重建他的引用。

否则，在您的具体情况下，您可以使用 vanilla JS 发送自定义事件并保持其他内容不变：

<!-- ..... -->

<td>
    <button onclick="window.dispatchEvent(new CustomEvent('open-modal', { detail: 'edit-project' }))">
    Edit
    </button>
</td>

<!-- ..... -->

<!-- Simple example for the modal triggering -->
<div x-data="{isOpen: false}" x-show="isOpen" @open-modal.window="isOpen = true">
   I'm open!
<div>