JQuery给动态添加的元素绑定事件的要领

本日有位墨初VIP主题的利用者，给我反馈了一个主题中的BUG。就是主题的评论滑块在回覆的时候，无法滑动（虽然这个问题已经修复），返来颠末重复的查找，终于确定了，在评论回覆自动建设的DIV元素中，无法绑定JQ事件，也就是说js无法监听到动态建设出来的元素，无法给他们绑定事件。

下面就说一说，如何给动态建设的元素添加绑定事件。

JQ中live()的要领

在JQ1.7版本以前，有个live（）要领

live() 要领为被选元素附加一个或多个事件处理惩罚措施，并划定当这些事件产生时运行的函数。

注：通过 live() 要领附加的事件处理惩罚措施合用于匹配选择器的当前及将来的元素（好比由剧本建设的新元素）。

语法

$(selector).live(event,data,function)

event：必须。划定添加到元素的一个或多个事件。

data：可选。划定通报到该函数的特别数据。

function：必须。划定当事件产生时运行的函数。

示例代码

$("button").live("click",function(){     $("p").slideToggle(); });

由于live()要领在jQuery版本1.7中被废弃，在版本1.9 中被移除，并以on()要领取代。我们这里不再多说，只是相识一下即可！

JQ中的on()要领

自jQuery版本1.7 起on()要领是bind()、live()和delegate()要领的新的替代品。

语法

$(selector).on(event,childSelector,data,function)

event：必须。划定要从被选元素移除的一个或多个事件或定名空间。

childSelector：可选。划定只能添加到指定的子元素上的事件处理惩罚措施（且不是选择器自己，好比已废弃的 delegate() 要领）。

data：可选。划定通报到函数的特别数据。

function：可选。划定当事件产生时运行的函数。

留意：利用 on() 要领添加的事件处理惩罚措施合用于当前及将来的元素（好比由剧本建设的新元素）。

示例代码

$(document).ready(function(){     $("p").on("click",function(){         alert("段落被点击了。");     }); });

上面说了那么多，下面切入本文的重点

利于jquery中的on()为新添加的动态元素绑定事件

给动态建设的元素添加绑定事件，其实就是利于了冒泡的道理，操作DOM树中，存在的被建设元素的父亲元素或整个DOM树来，通过适配的方法，来查找建设元素的绑定事件，我们可以通过下面的一个示例代码来分板一下。

HTML代码

<div class="mochu_div"> <!--P为动态建设的标签-->     <p class="mochu_p">         这里的P标签，通过JS动态建设的！我们为P标签绑定一个事件！         飞鸟慕鱼博客     </p> </div>

JQuery代码

$(".mochu_div").on('click','.mochu_p',function(e){     // code............飞鸟慕鱼博客     //说明一下，上面的 '.mochu_p' 可以按照你的详细环境举办适配;     //好比适配ID类：'#divid' ,表单输入: 'input[type="text"]'; })

说明一个，这种要领，对现存在的DOM元素节点或是动态建设的节点都有结果

假如还不是很领略，可以通过下面两种方法的较量来说明一下

$('.class').on("click",function(){……});相当于$('.class').bind("click",function(){……}); $(document).on("click",'.class',function(){……});相当于$('.class').live("click",function(){……});

本文当此竣事，假如你对关于如何操作JQ给将来（新动态建设）的元素节点绑定事件有着更好的要领，可以在下方留言给我哦，假如本篇文章有差池的处所也请汇报我哦！