解决动态生成元素无法触发事件的有效方法

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：js教程

动态生成元素触发事件无效的解决方法是使用事件委托。事件委托是将事件添加到父元素上，而不是直接添加到子元素上。当子元素触发事件时，事件会冒泡到父元素，然后在父元素上处理事件。这样可以确保动态生成的元素也能触发事件。 例如，如果你有一个列表，其中包含许多按钮，你可以将点击事件添加到列表（父元素）上，而不是每个按钮（子元素）上。这样，无论何时添加或删除按钮，都不会影响事件的触发。

在写JS时，我们在处理动态生成的HTML触发事件时，会无效。比如：

$("body").html("<b>ILovewww.caijicaiji.com</b>");$("b").click(function(){alert(123)})

你会发现点击B标签，并不会触发alter弹窗。具体逻辑原因菜鸡源码没深究，希望研究的可以去网上看看。

这里菜鸡源码只分享方法，会用到JQ的.on语法。

$("body").html("<b>ILovewww.caijicaiji.com</b>");$("body").on("click","b",function(){alert(123)});

这个就相当于重新选取了一次，从body开始一直到下面的b标签，这样就可以重新触发生成的B标签事件了。

当然里面的click点击事件也可以换成其他任何事件。

写的不是非常专业，希望能够帮助大家。