Question

我的HTML

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

我动态地在末尾添加一个锚标记，然后想要将一个点击处理程序附加到锚标记。所以我这样做

$(document).ready(function() {

   //Attach future proof click event to an anchor tag
   $('a.more').on('click', function() {
      var $parent = $(this).parent();
      $parent.text($parent.data('completemessage'));
   });

   //Add the anchor tag
   $('span.more-available').append($('<a class="more">...more</a>'));
});;

这不起作用。 如果我用“live”替换“on”，则可以使用。（但是现场折旧）

我知道我可以做到这一点

$(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>'));
});;

它有效，但我的问题是......

假设“on”提供了live的所有功能，我错了吗？ “on”不会绑定到未来的元素吗？这是正确的行为，还是我做错了什么。

小提琴：http://jsfiddle.net/arishlabroo/pRBke/5/

Answer 1

on()只是一个允许目标委派的活页夹。它更像是delegate()而非live()的替代品。

$('foo').live('click',fn);基本上是$(document).on('click','foo',fn);

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

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

Answer 2

使用如下，

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

您不能只用.live替换replace .on，而是需要将处理程序绑定到具有特定选择器的父元素，这意味着在为匹配选择器触发事件时将委托句柄。在上面，您要向span.more-available添加一个监听器，只有在匹配的选择器a.more被触发时才会执行处理程序。

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

找到动态添加元素的最接近的父元素。
将处理程序绑定到父元素，并将动态元素选择器作为第二个参数。

Answer 3

根据$.live()方法的jQuery documentation：

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。旧版jQuery的用户应该使用.delegate（）而不是.live（）。

$.live()的文档继续向我们展示了用于此方法后继者的方法和语法：

根据其后继者重写.live（）方法很简单;这些是用于所有三种事件附件方法的等效调用的模板：

$(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+

如果您使用的是jQuery 1.7或更高版本，请按照上面的说明使用$.on()方法。

“on”不绑定到动态添加的元素

3 个答案: