jquery动态添加html事件,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代码

这里的P标签，通过JS动态创建的！我们为P标签绑定一个事件！

飞鸟慕鱼博客

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给未来(新动态创建)的元素节点绑定事件有着更好的方法，可以在下方留言给我哦，如果本篇文章有不对的地方也请告诉我哦！