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,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...
在layui框架中,动态绑定事件通常使用jQuery来进行。但是,由于兼容性问题,移动端iOS不支持直接在body上使用事件委托,因此,我们需要将事件监听的目标改为其他元素,例如.setBox。 在实际操作中,我们可以通过...
**jQuery绑定事件**是JavaScript库jQuery中的核心功能之一,它极大地简化了DOM元素事件处理的流程,使得开发者能够更加高效地编写代码。在JavaScript原生语法中,为元素添加事件监听器通常涉及到`addEventListener`...
`.bind()`是jQuery中更通用的事件绑定方法,不仅可以绑定`click`事件,还可以绑定其他多种事件,如`mouseover`、`mouseout`等。下面是如何使用`.bind()`绑定`click`事件的例子: ```javascript $('#clickmebind')....
这里,`selector`是用于选择要绑定事件的元素的jQuery选择器,`event`是想要监听的事件名称(如`click`、`mouseover`等),而`handler`则是当事件发生时要执行的函数。 例如,如果我们想要在点击按钮时显示一条消息...
7. 绑定事件到动态元素:文章最后部分展示了如何为动态生成的select元素绑定事件处理器。通过`$.on()`方法,即使元素是后来添加到页面中的,我们依然可以捕捉到它们的事件。在这个例子中,为ID以`"sl_0"`开头的...
本文将深入探讨“Jquery数据绑定分页源码”这一主题,这通常涉及到在网页应用中实现数据的动态加载和分页显示。 数据绑定是前端开发中的一个重要概念,它允许开发者将UI元素与数据源进行关联,当数据发生变化时,UI...
本文将深入探讨如何使用jQuery来绑定click事件,并传递参数。 首先,`click`事件是jQuery中用于监听元素被点击时触发的事件。它允许我们在用户点击DOM元素时执行特定的函数或代码块。基本的用法是在目标元素上调用`...
在深入探讨jQuery循环绑定事件之前,我们需要了解jQuery是什么。jQuery是一个快速、小巧、功能丰富的JavaScript库,它通过一个统一的API简化了HTML文档遍历、事件处理、动画和Ajax交互。使用jQuery,开发者可以编写...
这是Jquery中的一个非常重要的方法,它确保了绑定事件的代码只会在DOM完全加载后执行,避免了因文档未完全加载而导致的脚本错误。 在总结上述知识点的同时,我们还应该注意一些常见的开发实践。例如,为了提高代码...
jquery绑定事件中怎样调用函数?视频教程,介绍的是jquery绑定事件中怎样调用函数?
例如,当用户添加新项到下拉列表时,我们可以使用`$(document).on('event', 'selector', function() {...})`来动态绑定事件监听器,确保新项也能响应用户操作。 二、jQuery与DropDownList 在HTML中,DropDownList...
本文将深入探讨多种jQuery绑定事件的实现方式,并提供解决事件重复绑定问题的策略。 首先,让我们来看看jQuery如何绑定单个事件。基本语法是使用`.bind()`函数,传入事件类型和处理函数。例如,绑定点击事件(click...
jQuery Shortcuts 是个超轻量级的方法,使用 jQuery 来绑定快捷键(热键)。 标签:jquery
随着Jquery版本的演进,live()和delegate()方法已经被on()方法所取代,因为on()方法提供了更灵活的方式来绑定事件处理器,尤其是对动态内容的处理。 2. 动态生成元素的事件绑定问题: Jquery在处理动态生成的元素时...
本篇文章将深入探讨如何使用jQuery中的`bind()`方法来绑定事件,并通过实例讲解如何改变页面上单行文本框(input[type="text"])的背景色。 `bind()`方法是jQuery提供的一种事件绑定功能,它可以将一个或多个事件...
本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件操作,包括动态添加行、隔行换色、选中变色、全选与反选等功能。 首先,让我们了解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库,它简化了...
jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件。如果没有参数,则删除所有绑定的事件。你可以将你用bind()注册的自定义事件取消绑定。如果提供了事件...
例如,如果你有一个通过AJAX加载的数据列表,新添加的列表项可以使用`on()`动态绑定事件: ```javascript $('#container').on('click', '.list-item', function() { // 处理点击事件 }); ``` 在这个例子中,...