前端开发——jquery之事件委托和绑定

功能：

箱套点击如上按钮，触发函数，使用ajax动态从底层加载数据到template（即要显示的部分）中，然后将templat嵌入到指定id的html元素中（就是指两行之间），形成完整的代码。

问题描述：

$('.show-details-btn').on('click',function(e) { console.log("点击事件被触发"); });

如果直接使用以上的jquery的on函数，则该事件不会被触发。

原因：

主要原因是加载顺序引起的。 我这里使用的是freemarker的模板引擎。这里首先加载全文ftl模板，加载完成后，加载javascript，js放在了前面。 js中调用” (document).ready()"，jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。这里" (document).ready()”里面包含了页面初始化跟页面显示函数，这个时候已经能正常显示界面。 也就是只有在显示函数执行完成后，隐藏的template才会被加载进来，才会生成对应的dom节点。理论上我的触发函数应该在这个时候被绑定，才能成功绑定，但是

这里牵扯到两个知识点： 1.解释性语言跟编译型语言

引用地址

2.JS内部的加载顺序 简单来讲就是当加载一个技术文件 js引擎会优先解析var变量和function定义！在预解析完成后从上到下逐步进行！ 所以这解释了为什么同一个js文件，函数可以先先使用在定义。 也解释了为什么我的绑定失败。因为刚加载js的时候我的触发函数就已经被解析了，而这个时候页面加载函数还没有触发，所以绑定失败。 参考链接

解决方法

核心思想：确保先加载节点，在绑定事件 1.直接在要隐藏的加载的template中写onclock触发，这样就能确保，先加载dom节点，在绑定 2.利用回调函数，在加载template的函数上进行回调，确保加载完成后在执行触发函数 3.利用jquery的事件委托和绑定。

这里我用了第三种就是事件的绑定和委托。采用的是on委托方式。 1.$(“.show-details-btn”).on(‘click’,function(e)）{}

2.$(‘body’).on(‘click’,”.show-details-btn”,function(e){}

第一种是普通绑定，第二种是委托事件 要理解第二种方法，首先我们要知道事件冒泡，就是当我们点击一个element触发事件时，该事件会向上传递。

而在上图执行之后，click事件会接着向树的根方向传播，广播到父元素，然后是每级的祖先元素，只要是它的某个后代元素上的单击事件被触发，事件就会传给它————这就是事件冒泡

然后再讲我们的案例，因为绑定的是body，所以一定能绑定成功。然后2方法会实现一个动态的监听效果，即，如果有”.show-details-btn”发生单机事件，，根绝冒泡原理1，事件传递到body上，所以也能执行触发函数。这里的动态就是指即使指不管是载绑定前还是绑定后加载的element，只要为”.show-details-btn”，都能触发绑定的事件。因为绑定的是body。

参考链接1 参考链接2 综上所述，使用事件委托，有两个好处： 1.如果是好多同一类型的element需要触发相同的事件，name只需要绑定到parent或者更前的element即可 2.解决了数据动态传无法绑定的事情