6

我的 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/

4

3 回答 3

11

on()只是一个允许目标委托的活页夹。它更像是替代 fordelegate()而不是 for 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'));
});
于 2012-04-27T17:35:41.317 回答
2

像下面这样使用它，

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

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

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

  1. 查找要动态添加元素的最近的父元素。
  2. 使用动态元素选择器作为第二个参数将处理程序绑定到父元素。
于 2012-04-27T17:35:43.990 回答
0

根据该方法的 jQuery文档$.live()：

从 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()方法。

于 2012-04-27T17:39:55.747 回答