要使用 jQuery 的 each
函数处理动态生成的元素,您需要确保在动态生成的元素添加到 DOM 之后执行该函数。您可以使用事件委托(event delegation)来实现这一点。事件委托是将事件监听器添加到父元素上,而不是直接添加到目标元素上。当事件触发时,jQuery 会检查事件源是否匹配选择器,如果匹配,则执行相应的回调函数。
以下是一个使用 jQuery 处理动态生成的元素的示例:
HTML 结构:
JavaScript/jQuery 代码:
$(document).ready(function() { // 给动态生成的按钮添加点击事件 $("#container").on("click", ".dynamic-button", function() { alert("Button clicked: " + $(this).text()); }); // 动态添加新的按钮 function addNewButton() { var newButton = $("
在这个示例中,我们将点击事件监听器添加到了 #container
元素上,而不是直接添加到 .dynamic-button
元素上。当点击事件触发时,jQuery 会检查事件源是否匹配 .dynamic-button
选择器。如果匹配,则执行相应的回调函数。这样,无论何时添加新的 .dynamic-button
元素,点击事件都会被正确处理。