`

jquery如何动态的绑定事件

阅读更多
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"的元素是页面已加载生成的,不是动态生成的

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics