📌  相关文章
📜  如何处理 jQuery 中动态创建的元素中的事件?(1)

📅  最后修改于: 2023-12-03 14:52:59.896000             🧑  作者: Mango

如何处理 jQuery 中动态创建的元素中的事件?

在 jQuery 中,可以使用 .on() 方法来绑定事件处理程序。但是,当你动态创建一个元素并想要绑定一个事件时,该方法不起作用。这是因为 .on() 方法只会绑定在元素已经存在于 DOM 树中时的事件。

所以,你需要对动态创建的元素设置事件委托(event delegation)。事件委托是通过冒泡的方式绑定在父元素上的,当子元素触发事件时,事件会一层层向上冒泡到父元素,然后触发相应的事件处理程序。

下面是如何实现事件委托的代码示例:

// 给父元素绑定事件处理程序
$('#parent').on('click', '.child', function() {
  // 事件处理程序
});

// 动态创建子元素
$('<div>').addClass('child').appendTo('#parent');

在上面的示例中,当动态创建的子元素被点击时,点击事件会冒泡到父元素,然后触发父元素上绑定的事件处理程序。由于使用了事件委托,因此无论何时创建子元素,它们都会继承父元素的事件处理程序。

需要注意的是,父元素不能是动态创建的,否则事件委托也不会起作用。另外,父元素的选择器必须在动态创建子元素之前已经存在于 DOM 树中。

以上就是如何处理 jQuery 中动态创建的元素中事件的方法。如果需要绑定其他类型的事件,只需要将 click 替换为相应的事件类型即可。