今天有位墨初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"]';
})

复制

jquery给jsdiv添加点击事件_绑定事件

说明一个，这种方法，对现存在的DOM元素节点或是动态创建的节点都有效果

如果还不是很理解，可以通过下面两种方式的比较来说明一下

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

复制

本文当此结束，如果你对关于如何利用JQ给未来（新动态创建）的元素节点绑定事件有着更好的方法，可以在下方留言给我哦，如果本篇文章有不对的地方也请告诉我哦！