Jquery &引用；关于；不绑定到动态添加的元素

我的HTML

你好​

我动态地将一个锚定标记添加到末尾，然后希望将一个单击处理程序附加到锚定标记。所以我这么做

<div>    
    <span  class="more-available" data-completeMessage="This is the complete message you see after clicking more">Hello</span>​
</div>

$（文档）.ready（函数（）{
//将未来验证点击事件附加到锚定标记
$（'a.more'）。在（'click'，function（）上{
var$parent=$（this.parent（）；
$parent.text（$parent.data（'completemessage'））；
});
//添加锚定标记
$（'span.more available'）。append（$（'
on（）
只是一个允许目标委派的活页夹。它更多地是对
委派（）
的替代，而不是对
live（）
的替代

$（'foo'）。live（'click'，fn）；
本质上是
$（document）。on（'click'，'foo'，fn）；

考虑到这一点，只需将click事件绑定到常量父包装器并委托给目标，如下所示：

$(document).ready(function() {

    $('div').on('click','a.more', function() {
        var $parent = $(this).parent();
        $parent.text($parent.data('completemessage'));
    });

    $('span.more-available').append($('<a class="more">...more</a>'));
});;​

像下面那样使用它

$('span.more-available').on('click', 'a.more', function(){
    var $parent = $(this).parent();
    $parent.text($parent.data('completemessage'));
});

您不能仅用
替换
.live
。在
上，您需要使用特定选择器将处理程序绑定到父元素，这意味着在触发匹配选择器的事件时，将委派处理程序。在上面的示例中，您将向
span添加侦听器。更多可用的
将执行仅当触发匹配选择器
a.more
时，处理程序才会启动

简而言之，按照以下两个步骤将
.live
替换为
.on

查找将动态添加元素的最近父元素
使用动态元素选择器作为第二个参数，将处理程序绑定到父元素
根据jQuery中的
$.live（）
方法：

从jQuery 1.7开始，.live（）方法已被弃用。请使用.on（）附加事件处理程序。较旧版本的jQuery用户应优先使用.delegate（），而不是.live（）

$.live（）
的文档进一步向我们展示了此方法的后续方法和语法：

根据后续方法重写.live（）方法非常简单；以下是所有三种事件附件方法的等效调用模板：

如果您使用的是jQuery 1.7或更高版本，请使用（）

方法如上所述。

我相信你需要更高一级的

on

才能像live一样工作，因为事件在冒泡。我看不出这个答案比前两个答案更有帮助，特别是因为它只背诵了jquery文档。@PHPBree我们可能不同意，但我认为它对我们来说非常有帮助每个人都应该知道如何阅读相关文档。这是一个很滑的斜坡。一个简单的链接到评论中的文档就足够了。这是一个基本的枯燥方法-将用户发送到jquery.com阅读那里的文档。给出深思熟虑的答案的用户应该得到升级票，而不是复制/粘贴文档而不做其他事情的用户。@PHPBree你是自由投票。我个人认为答案是可以接受的，如果我是OP，我不介意有人引用相关文档。非常感谢，伙计。这真的帮了大忙：）

$('span.more-available').on('click', 'a.more', function(){
    var $parent = $(this).parent();
    $parent.text($parent.data('completemessage'));
});

$('span.more-available').on('click', 'a.more', function () {
   //..your code
});

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+