`

jquery的事件委托

 
阅读更多
$('.element').bind('click', function() {
    $(this).clone().appendTo('$(.parent)');
});

使用bind绑定, 新生的clone对象不会包含点击事件.

 

解决方式有二:

1. 使用live() 绑定. live()不仅作用与当前元素,而且也作用于未来的元素.  对应的解绑函数die()

$('.element').live('click', function() {
    $(this).clone().appendTo($('.parent'));
});

 2. 使用delegate()绑定, 解绑函数undelegate()

$('.parent').delegate('.element', 'click', function() {
    $(this).clone().appendTo($('.parent'));
});

 

 

分享到:
评论

相关推荐

    jQuery事件委托之Safari

    ### jQuery事件委托之Safari知识点解析 #### 1. 事件委托概念 事件委托是一种在jQuery中使用的技术,它允许开发者将事件监听器绑定在父级元素上,而不是目标元素本身。这样做的好处是,当目标元素不存在时,事件...

    JQuery事件委托原理与用法实例分析

    JQuery事件委托是一种高效处理大量动态元素事件绑定的技术,它基于JavaScript中的事件冒泡机制。在HTML结构中,事件通常会从最深的元素向上冒泡到其父元素,直至到达文档的根节点。事件委托就是利用这个特性,将事件...

    JQuery事件委托(适用于给动态生成的脚本元素添加事件)

    在JavaScript和jQuery的世界里,事件委托是一种非常重要的技术,尤其在处理动态生成的元素时。在上述场景中,开发者遇到了一个问题:使用jQuery为特定类名的元素绑定点击事件,但在内容动态更新后,这些事件不再生效...

    jQuery事件委托代码实践详解

    在JavaScript和jQuery中,事件委托是一种优化性能的策略,它利用了事件冒泡的特性,使得我们可以用一个事件处理程序来处理一类元素的所有事件,而不是为每个元素单独绑定事件监听器。这种技术在处理动态添加的元素...

    jquery效果事件

    事件委托是jQuery的一种优化策略,利用事件冒泡机制,将事件绑定在父元素上,从而减少事件处理器的数量。例如,`$("ul").on("click", "li", function() { ... })`会在ul元素上监听点击事件,但只有当点击的是li子...

    最全前端面试题-5(jquery篇-上百篇题集整理1个月)

    这些方法都是jQuery中用于事件委托的,目的是为尚未存在的或动态添加的元素绑定事件。`bind`是最基础的事件绑定,不支持事件委托;`live`已废弃,支持事件委托,但性能较差;`delegate`支持事件委托,指定事件冒泡的...

    jQuery动态追加页面数据以及事件委托详解

    标题和描述中提到的“jQuery动态追加页面数据以及事件委托详解”,涉及的两个主要知识点是:jQuery动态追加页面数据和jQuery事件委托。详细内容包括如何使用jQuery技术向页面动态追加内容,并利用事件委托处理动态...

    jQuery事件绑定和委托实例

    jQuery事件绑定和委托是JavaScript库jQuery中用于处理用户交互的核心机制。它们允许开发者响应用户的动作,如点击、鼠标悬浮、键盘输入等。本文将详细解释这些概念,并通过实例展示其用法。 1. `on()` 方法 `on()` ...

    jQueryAPI_CHM

    3. 学习jQuery事件委托,优化大规模DOM操作的性能。 4. 结合CSS3和HTML5新特性,如动画、多媒体、离线存储等,提升用户体验。 5. 探索jQuery与Ajax的深度结合,实现前后端分离的Web应用。 通过阅读《jQuery API CHM...

    Jquery 事件的订购与退订案例

    在JavaScript的世界里,...总的来说,理解和掌握jQuery的事件订购与退订机制,以及如何有效地利用事件委托,将使你能够编写更加灵活且高效的前端代码。通过不断的实践和探索,你将在jQuery事件处理方面变得更加熟练。

    JQuery事件Demo

    **jQuery事件Demo详解** 在Web开发中,JavaScript的事件处理是构建交互式用户界面的关键技术。jQuery库大大简化了这一过程,提供了丰富的API和方法来处理DOM(文档对象模型)中的事件。本篇文章将深入探讨jQuery...

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

    3. jQuery中的事件委托技术:为了解决动态元素的事件处理问题,jQuery引入了一种名为“事件委托”的技术。事件委托允许我们将事件监听器绑定到一个父级元素上,而不是直接绑定到目标元素上。这样,即使目标元素是...

    jquery 监听 键盘 事件

    在JavaScript的世界里,jQuery库为开发者提供了方便快捷的方式来操作DOM、处理事件、执行动画和Ajax交互。其中,监听键盘事件是常见的用户交互处理之一。本文将深入探讨如何使用jQuery来监听键盘事件,以及相关的...

    jQuery第4天知识点:jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip

    2. 事件委托:使用`.on("event", selector, function())`可以实现事件委托,例如`$("#container").on("click", ".child", function() {...})`,这样点击任何".child"元素时,都会触发事件处理。 3. 触发事件:`....

    jquery快速学三(事件与动画)

    6. 委派事件:使用`.on()`的另一种形式可以实现事件委托,如`$("body").on("click", ".myClass", function() {...})`。这种方法在动态添加的元素上也能生效,提高了代码的可维护性和效率。 二、动画效果 7. 动画...

Global site tag (gtag.js) - Google Analytics