domcontentloaded 相关问题

如何编辑模板克隆对象的样式？ / 将来会创建的对象？

document.addEventListener("DOMContentLoaded", ()=>{ 让 template = document.querySelector(".template"); 让按钮 = document.querySelector(".button"); ...

鼠标进入，每秒缩小图像尺寸5%

我将图像放入 div 中。当我将鼠标移入 div 时，图像每秒应减小 5%。我已经完成了这个脚本，但没有任何反应。 document.addEventListener("DOMContentLoaded...

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

我的 Laravel 和 Alpine.js 刀片页面中有此表。 名字 我的 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 事件不会触发。有任何已知的修复方法吗？感谢所有帮助。 解决方案是将表包含在由 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>