`
周禄康
  • 浏览: 161060 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

jQuery -- 如何为动态添加的元素绑定事件处理函数

阅读更多

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

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

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

$('input').click(function () {

//处理代码

});

 

$('.clickme').bind('click', function() {
  // Bound handler called.
});

 

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

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

$('.clickme').live('click', function() {
  // Live handler called.
});

 

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

$('body').append('<div class="clickme">Another target</div>');

 

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/xinhaozheng/archive/2010/09/03/5862109.aspx

 

 

分享到:
评论

相关推荐

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

    在处理动态生成的元素时,jQuery提供了强大的选择器和方法,这使得开发者能够以简洁的方式操作这些元素,包括为它们添加事件监听器。 2. 动态生成元素的事件处理难题:在Web开发中,经常遇到需要动态生成页面元素的...

    jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】

    - `$(element).on('event', function() {...})`:动态绑定事件,支持多种事件类型。 5. **动画效果** - `$(element).fadeIn()`/`.fadeOut()`:元素淡入淡出效果。 - `$(element).slideToggle()`:元素滑动显示或...

    jquery-3.2.0.js,jquery-3.2.0.min.js

    - **事件委托(Event Delegation)**:使用 `.delegate()` 或 `.on()` 的事件委托功能处理动态添加的元素事件。 **动画(Animation):** - **基本动画(Basic Animations)**:`.fadeIn()`, `.fadeOut()`, `....

    jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】

    事件处理是jQuery的另一大亮点,`.click()`、`.hover()`等方法使得绑定和解绑事件变得轻而易举。动画效果是jQuery吸引人的地方,`.fadeIn()`, `.slideUp()`, `.animate()`等方法让动态效果变得简单易行。最后,...

    jQuery-2.2.4.js

    jQuery还支持事件委托,利用$(parent).on('event', 'selector', function() {})可以在父元素上处理子元素的事件。 动画效果是jQuery的亮点,$.fn.animate()方法允许开发者创建自定义动画,而$.fn.slideToggle()、$....

    jquery-2.0.0.js 、jquery-2.0.0.min.js 【官方jquery包 js】

    - **`.on()`事件绑定**:在2.0.0中,`.on()`成为主要的事件处理函数,可以处理直接绑定和后代元素的事件,简化了事件处理的代码。 - **`.unwrap()`方法**:这个新方法允许开发者删除一个元素的所有父元素,使其...

    jquery-3.3.1.js和jquery-3.3.1.min.js.zip

    此外,jQuery还提供了丰富的事件处理功能。通过`.on()`方法,我们可以绑定各种DOM事件,如点击、鼠标悬浮等,而无需关注浏览器的兼容性问题。例如,`$("#button").on("click", function() {...})`将为ID为"button"的...

    最新jquery-2.1.1.js以及jquery-2.1.1.min.js文件

    3. **事件处理**:使用`.on()`、`.off()`等方法可以方便地绑定和解绑事件,同时支持事件冒泡和事件委托。 4. **AJAX**:jQuery的`$.ajax()`和`$.get()`、`$.post()`等函数简化了异步数据请求,让跨域请求变得容易。...

    jquery-2.1.4.js 、jquery-2.1.4.min.js 【jquery包 js】

    标题中提到的"jquery-2.1.4.js"和"jquery-2.1.4.min.js"正是这个库的两个版本,它们在网页动态效果处理、DOM操作、事件处理等方面有着广泛的应用。 首先,我们来了解下jQuery的核心理念: "Write Less, Do More"。...

    Jquery下載,Jquery-3.5.1

    3. **事件处理**: 使用 jQuery,可以轻松绑定和解绑事件处理函数。如 `$("#button").click(function() {...})` 会在按钮被点击时执行指定的函数。 4. **动画**: jQuery 动画功能强大,包括 `fadeIn()`, `fadeOut()`...

    jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】

    2. 事件处理:`.on()`, `.off()`, `.click()`, `.hover()`等方法简化了事件绑定和解绑,使得事件处理更加灵活。 3. 动画效果:`.fadeIn()`, `.slideUp()`, `.animate()`等动画函数,让网页动态效果的实现变得直观且...

    jquery-2.0.3.js和jquery-2.0.3.min.js

    2. **事件处理**:事件绑定和解绑的API更加简洁,同时增加了事件委托功能,使得动态添加的元素也能响应事件,提高了代码的可维护性。 3. **DOM操作**:jQuery提供了丰富的DOM操作方法,如`.append()`, `.prepend()`...

    jquery1.7 API/jquery-1.7.1.min.js/jquery-1.7.1.js

    - **事件绑定的改变**:`.live()`方法被弃用,取而代之的是`.on()`方法,它更强大,可以处理动态添加的DOM元素的事件绑定。 - **动画改进**:`$.animate()`方法得到增强,可以更好地控制动画过程,如自定义 easing...

    jquery-3.3.1.js/min.js

    此外,`.off()`用于移除事件绑定,`.trigger()`可以手动触发事件,`.delegate()`和`.live()`(在较新版本中已被`.on()`取代)则实现了事件委托,使得动态添加的元素也能响应事件。 三、动画效果 jQuery以其强大的...

    jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】

    jQuery的事件处理函数如`click()`, `mouseover()`, `mouseout()`等,使得绑定和解绑事件变得容易。同时,`on()`方法可以用于一次性绑定多个事件,提高了代码的可维护性。 4. **动画效果(Animation)** jQuery的`...

    jquery-3.3.1.js和jquery.min-3.3.1.js

    - **事件处理**:通过`.on()`, `.click()`, `.change()`等方法,可以轻松地绑定和处理各种事件。 - **动画效果**:`fadeIn()`, `slideUp()`, `animate()`等方法让创建动态效果变得直观。 - **Ajax交互**:`$.ajax...

    jquery-2.1.1.js 、jquery-2.1.1.min.js 【jquery包 js】

    3. **事件处理**:jQuery简化了事件绑定和解绑,`$(selector).on('click', function() {...})`用于监听点击事件,`$(selector).off('click')`则移除该事件。 4. **动画效果**:`fadeIn()`, `slideUp()`, `animate()...

    jquery-1.4.2&&jquery-1.4.2-vsdoc.js.rar

    其中,`live()`方法是一个重要的更新,它允许为动态添加到页面的元素绑定事件。例如,`$("a").live("click", function() {...})`将确保所有链接点击事件都能得到响应,即使这些链接在页面加载后才被添加。 另一个...

    jquery-3.3.1.js和 jquery-3.3.1.min.js

    `$(element).on('event', callback)`允许开发者在一个元素上绑定事件处理器,而`.trigger('event')`可以触发事件。 3. **动画效果**:jQuery的`.animate()`方法允许开发者创建复杂的动画效果,如淡入淡出、滑动等。...

    layui动态绑定事件的方法

    在前端开发中,动态绑定事件是一项非常重要的技术,尤其是在处理动态创建的DOM元素时。本文将介绍使用layui框架来实现动态绑定事件的方法,并探讨其中的关键技术点。 首先,我们需要了解动态创建DOM元素后,原有的...

Global site tag (gtag.js) - Google Analytics