jquery动态生成dom(比如append)导致js事件无效

Posted study_php

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery动态生成dom(比如append)导致js事件无效相关的知识,希望对你有一定的参考价值。

如果无效用这个方法: on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

<div id="zkdiv">
 <input type="button" value="展开" id="zk" class="zk"/> <br>
</div>
$("#zkdiv").on("click",".zk",function(){
 console.log("on 点击一次");
});
var html2 = "<input type=‘button‘ class=‘zk‘ value=‘新生成的展开‘ />";
$("#zkdiv").append(html2);

这样一来处理函数就绑定到#zkdiv的选择器上去了,事件冒泡导致的性能损失会大大降低(使用该方法时要确保.on前面的选择器能选择到对象 否则不起作用)

click是点击事件,但是在页面加载完之后,jquery事件新添加的元素,用click的话是无法获取元素的,这个时候要用on去获取元素事件,简单的说页面加载完成时候页面显示的元素可以用on,也可以用click,但是页面加载完成之后后期再追加的元素只能用on。

 

提示:如需移除事件处理程序,请使用 off() 方法。

提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。

 

引用:https://www.jb51.net/article/146535.htm

以上是关于jquery动态生成dom(比如append)导致js事件无效的主要内容,如果未能解决你的问题,请参考以下文章

如何来使用jquery动态的往页面添加元素

JQuery动态创建删除DOM元素

DOM节点的插入(jQuery)

关于jQuery中动态生成的点击事件触发两次的讨论

jQuery DOM插入节点操作指南

DOM内部插入append()与appendTo()