js中的事件委托机制(解决动态生成的dom元素无法绑定事件的问题)

我们知道,在使用一些插件获取服务器数据然后动态渲染dom元素后,渲染的dom元素是无法绑定事件的,因为我们写的js是在一开始就渲染好了的,所以后面生成的dom是没办法找到的。解决方法:

1.生成Dom时把js脚本在写进去一次(舍弃,不可能这么麻烦)

2.使用js的事件委托机制.

意思是由一个元素监听他的子元素所发生的事件,这样,就算是生成的元素也可以生效.例子:

<div style="display: flex; flex-direction: row;justify-content: center;" id="container">
<table id="jqgrid"></table><table id="jqgrid1"></table>
</div>

在这里,我们的表格是用jqgrid插件生成的,所以td上面绑定事件无效,不过我们可以这样写:

    $("#container").on('click', 'td', function () {
         alert(2);
    })

这样写事件是有效的,因为我们把事件委托给class为container的div监听,而他监听的是所有的td子元素,小伙伴们可以试一试

阅读更多

没有更多推荐了,返回首页