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子元素，小伙伴们可以试一试