jquery如何动态的绑定事件,最近这个问题困扰着我。
事件起因:
我要用jquery动态的生产多个节点,如:我想在如下程序
<div id="a" class="X"></div>
<div id="b"></div>
中的id="b"的div中创建节点
<div id="b1">
<div b="b11" class="x"></div>
</div>
最终想到达的效果为:
<div id="a" class="X"></div>
<div id="b">
<div id="b1">
<div id="b11" class="x"></div>
</div>
</div>
并且为id="a11" 绑定一个鼠标移入的事件,目前程序已经为class="X"的对象绑定了鼠标移入的事件了如:
$(".X").mouseenter(function(){
alert("你好");
});
目前程序可以当光标移入id="a" class="X" 的div中时会弹出 "你好" ,
如果让程序动态生成id="b1"的div时,再把光标移入id="a" class="X" 的div中时程序依然会弹出 "你好" ,但是如果将光标移入id="b11" class="X"的div时事件并未触发,这是为什么呢?不是程序已经对class="X"的对象已经绑定了事件了吗?
其实原因是这样的:
这就涉及了页面dom对象加载问题了,
为什么id="a" class="X"的div就能触发事件呢?因为这个div页面加载到页面了,而且程序也加载js,js就对这个div记录了下来,所以对这个div可以触发光标移入事件
那么,动态生成的那个id="b11" class="x"的div,为什么没有执行光标移入事件呢,这是因为,这个div是动态生成了,此时的程序已经加载了js,而且js只记住了第一次页面加载的dom对象,而没有记住动态,也不可能记住动态生成的dom对象,所以对于这个动态生成的div,是不会触发光标移入事件的,那么怎样才能对这个动态生成的div进行事件绑定呢?请看下面:
jquery 提供了这个方法,网上也有说明,那就是bind(),live(),delegate() on(),面前新版本jquery已经用了on,替换前几种,格式如下:
$("A").on("B","C",function(){});
A:表示要绑定元素的父辈以上的元素,
B:事件名
C:表示要绑定的元素
如何针对这个上面的问题进行事件绑定呢?
方法1: $("#b1").on("mouseenter",".X",function(){alert("你好");});
方法2: $("#b").on("mouseenter",".X",function(){alert("你好");});
你认为哪个方法可以呢,还是都可以?
答案:方法2可以,方法1不可以
原因:
要绑定的元素的父辈或父辈以上元素不能是动态生成,因为js加载完后并不能记住动态生成的元素,所以方法1不可以,而方法2 div="#b"的元素是页面已加载生成的,不是动态生成的
分享到:
相关推荐
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...
JQuery绑定事件 Js实现 需要理解的可以下载
主要介绍了JQuery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下
主要介绍了浅谈jQuery事件绑定原理,并做了简单分析,然后用实例来展示,需要的朋友可以参考下
jquery绑定click事件传递参数
jquery 监听 键盘 事件
Jquery数据绑定分页源码
JQuery绑定事件四种实现方法解析 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码。下面我们来看下jQuery...
下面小编就为大家带来一篇深入理解JQuery循环绑定事件。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
有些时候可能需要用到脚本为一些窗体绑定事件:比如Jquery为单选框checkbox绑定单击事件,本人搜索整理一些常用技巧,需要了解的朋友可以参考下
主要为大家详细介绍了多种jQuery绑定事件的实现方式,分享了jQuery防止重复绑定事件的解决方法,感兴趣的小伙伴们可以参考一下
JQuery实现动态绑定DropDownList和二级联动
jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件。如果没有参数,则删除所有绑定的事件。你可以将你用bind()注册的自定义事件取消绑定。如果提供了事件...
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。 jQuery...
为页面标签使用bind绑定事件,使用jquery改变单行文本框的背景色
jQuery搜索框实例绑定提交事件是一款下拉选择多种搜索引擎分类,搜索框输入文字键盘回车绑定提交搜索按钮代码。 dropdown-toggle search-select" data-toggle="dropdown">百度搜索 ...
今天上午对checkbox相关事件整合了下,运用jquery相关知识,整理table中隔行换色,选中变色,全选,反选等操作,并且对table动态添加行进行了相关整理。
table 绑定数据 jquery 分页 table 绑定数据 jquery 分页 table 绑定数据 jquery 分页
动态绑定键盘事件的方法或许会有很多,在本文将为大家介绍下jquery是如何快捷实现的,感兴趣的朋友不要错过
本文主要向大家详细介绍了jQuery的绑定事件和移除事件的使用方法和示例分享,这里推荐给有需要的小伙伴们参考下。