关于js动态加载html元素,html中绑定的click事件不生效的解决办法

出现这种情况,其实是不清楚js事件委托的原理,就是指未来还不清楚会创建多少个节点,所以暂时没办法直接给他们注册事件。
因为javascript在dom载入之前,就已经把js加载了。
比如:
js动态加载如下标签:

<button id="query">查询</button>

js中的绑定事件如下:

 $("#query").click(function () {
        //do sth...
    });

然后当你点击查询按钮的时候,按钮的绑定事件并没有生效,就好像写的这个function不存在一样。
这时候通过如下方法:

$("body").on('click', '#query', function () {
	//do sth...
});

即可实现查询按钮的绑定事件。
我在另外一篇博客《js给具有多个class属性的元素添加点击事件》也讲过click()和on()方法的区别。
通过jquery的on()方法添加的事件处理程序,是可以用于当前未来的元素(比如由js和ajax创建的新元素)。
原理其实很简单,就是给新元素绑定的事件,通过事件冒泡机制找到了对应的祖先元素,然后再进行相应的事件处理。

PS:解释一下事件冒泡机制和事件捕获机制。
事件捕获:当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件
事件冒泡:当事件到达目标节点后,会沿着捕获阶段的路线原路返回。同样,所有经过的节点,都会触发对应的事件
如图所示:
在这里插入图片描述

发布了101 篇原创文章 · 获赞 69 · 访问量 22万+

猜你喜欢

转载自blog.csdn.net/weekdawn/article/details/103674743