你好,欢迎访问我的博客!登录 评论排行榜 领券购物 免责声明 投稿本站 本站主题
当前位置:首页 - 笔记 - JS/JQ - 正文 代码,改变世界!

JQuery给动态添加的元素绑定事件的方法

2018-04-17JS/JQ墨初1651°c
A+ A-

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

jq绑定事件,jQuery事件绑定on(),jQuery给动态添加的元素绑定事件的方法,jq给动态元素绑定事件,jq给未来元素绑定事件

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

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

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

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

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
JQuery给动态添加的元素绑定事件的方法

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录