`

Jquery 为动态添加元素绑定事件

 
阅读更多

有一段时间没用jquery了,今天又碰到这个问题。当时是知道有livejquery可以解决。但是我并不喜欢为了这个而另外加载一个。我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的jquery已经添加了这个功能。我们已经不需要为此烦恼了。

参考:http://api.jquery.com/live/

以前我们定义事件,比如为元素定义单击事件是这样写的:

Jquery代码收藏代码
  1. $('input').click(function(){
  2. //处理代码
  3. });

Jquery代码收藏代码
  1. $('.clickme').bind('click',function(){
  2. //Boundhandlercalled.
  3. });

但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。即使你使用jquery的clone函数,它并不能将事件也复制(到目前为止我还不清楚它是为什么这样定义,是没法复制还是刻意这么处理,以防止出现某些异常,这还有待去分析一下jquery的源代码)。

现在,使用live你可以轻松搞定,

Jquery代码收藏代码
  1. $('.clickme').live('click',function(){
  2. //Livehandlercalled.
  3. });

这样,你即使在后面动态插入的元素,也会被绑定事件,

Jquery代码收藏代码
  1. $('body').append('<divclass="clickme">Anothertarget</div>');

分享到:
评论

相关推荐

    jQuery为动态生成的select元素添加事件的方法

    7. 绑定事件到动态元素:文章最后部分展示了如何为动态生成的select元素绑定事件处理器。通过`$.on()`方法,即使元素是后来添加到页面中的,我们依然可以捕捉到它们的事件。在这个例子中,为ID以`"sl_0"`开头的...

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

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...

    jQuery实现动态添加、删除按钮及input输入框的方法

    append()方法会将指定内容添加到匹配元素集合中每个元素的末尾,是动态添加元素的核心方法之一。在添加输入框的同时,也会相应地增加FieldCount和x的值,以记录和追踪已添加输入框的数量。 删除输入框的实现利用了...

    jquery html动态添加的元素绑定事件详解

    接下来,我们将详细探讨如何使用jQuery为动态添加的HTML元素绑定事件。 首先,需要了解的是,在jQuery中,传统的直接事件绑定方式(如使用`.click()`、`.bind()`等方法)仅适用于静态内容。对于那些后来添加到DOM中...

    JQuery 动态删除添加html元素bind事件

    然而,在动态添加元素后,使用`bind()`可能无法立即捕捉到新元素的事件,因为事件处理程序是在元素创建时绑定的。为了解决这个问题,可以使用`live()`或`on()`方法(jQuery 1.7+)来实现事件委托。在jQuery 1.3到1.9...

    jQuery如何获取动态添加的元素

    然而,动态添加的元素不会自动继承之前为父元素或已存在元素绑定的事件处理器。这就是说,如果使用传统的事件绑定方法,比如jQuery的.bind()方法,这些方法只会影响当前已存在的元素,对于之后动态添加到DOM中的元素...

    jquery动态添加元素事件失效问题解决方法

    总之,jQuery的`on()`方法是解决动态添加元素事件失效的关键,它通过在静态父元素上监听事件并转发给动态子元素,实现了对动态内容的事件处理。合理使用`on()`方法,能够帮助我们创建更加动态、响应式的Web应用。

    jquery动态添加 删除指定行元素

    在JavaScript和jQuery的世界里,动态地添加和删除DOM元素是常见的需求,特别是在处理表格数据时。本文将深入探讨如何利用jQuery实现动态添加和删除指定行的功能。 首先,我们来看动态添加行的操作。这个过程通常...

    jquery表格动态添加删除行代码.zip

    本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能,为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能,即在表格中动态地添加和删除行,这对于数据展示和编辑是非常实用的。 首先...

    layui动态绑定事件的方法

    对于动态添加的元素,我们同样可以使用.on()方法进行事件委托,将事件监听设置在静态的父级元素上,从而实现对动态添加元素的事件监听。 在实现的过程中,我们也可以利用ES6的模板字符串(`)来拼接要动态创建的...

    74、jquery表格动态添加删除行代码

    在IT行业中,jQuery是一个广泛使用的JavaScript库...通过以上步骤,你可以利用jQuery实现表格的动态添加和删除行功能,为用户提供更直观和灵活的数据管理界面。这种技术在数据录入、展示和编辑等场景中具有广泛的应用。

    jQuery动态添加删除编辑标签代码.zip

    本资源"jQuery动态添加删除编辑标签代码.zip"提供了一种实现动态管理标签页的方法,尤其适用于需要用户交互性高的Web应用。下面将详细阐述这个代码实现的功能及其背后的编程原理。 首先,"jQuery动态添加删除编辑...

    jquery动态添加删除(tr/td)

    - 在Web开发中,动态添加元素是指在网页加载完成后,通过编程的方式动态地向页面中插入新的HTML元素。 - 动态删除元素则是指从当前DOM(文档对象模型)中移除指定的元素。 2. jQuery中动态操作DOM的相关方法: -...

    jquery添加和删除元素

    在提供的`addelement`示例中,可能包含了一个展示如何动态添加元素的实例。例如,用户点击按钮时,新元素可能会被添加到某个列表。这个过程通常涉及事件监听和DOM操作的结合。比如: ```javascript $("#addButton")...

    jquery 动态添加控件

    本篇文章将深入探讨如何使用jQuery动态添加控件,包括元素的创建、插入和绑定事件,以及在实际项目中的应用。 首先,我们来了解jQuery如何创建新的HTML元素。在JavaScript中,创建元素通常是通过`document....

    jquery动态添加tab内嵌ifream插件

    本篇文章将详细讲解如何利用jQuery实现动态添加Tab并内嵌iFrame插件,以及相关的核心知识点。 首先,我们需要理解Tab组件的基本原理。Tab组件通常用于在有限的空间内展示多个独立但相关的页面内容。用户可以通过...

    jQuery动态添加的元素绑定事件处理函数代码

    在此例中,我们为所有'.myclass'类的元素绑定了mouseenter和mouseleave事件处理函数。 总结来说,为了在jQuery中处理动态添加的元素的事件,推荐使用.on()方法来实现事件委托,这不仅符合现代jQuery编程的最佳实践...

    jQuery动态添加删除分组插件

    - **事件委托**:为了处理动态添加的元素,通常使用事件委托,将事件绑定到父级元素而不是具体的子元素,这样即使在动态添加或删除元素后,事件处理依然有效。 - **数据持久化**:用户分组的增删操作应该与服务器...

    jquery append 动态添加的元素事件on 不起作用的解决方案

    首先,需要了解的是,在页面加载时,jQuery会为选定的元素绑定事件处理器。如果这些元素是后来通过脚本动态添加到DOM中的,那么原来的事件处理器并不会自动地绑定到这些新添加的元素上。这是因为,当浏览器解析HTML...

Global site tag (gtag.js) - Google Analytics