javascript - 带有上下文参数 jquery 1.4 的克隆和实时函数

Question

我有几个 div HTML 元素，我正在使用 clone(true) 选项克隆它，因为我也想复制事件。

现在我的 HTML div block 中有某些点击事件，而在创建事件时我也使用上下文参数，例如

var $block ="<div class='task-create-content' >"+
                 "<div class='task-create-preview'>"+
                      "<div class='items'>" +
                           "<div><input type='text' class='edit wtp'/></div>" +
                           "<div><input type='text' class='edit wtp'/></div>" +
                      "</div>"+
                 "</div>");

$(".wtp", $block).live('click',function() {
     alert("hi");
})

现在，当我使用 clone(true) 克隆此 block 时，即使我正在分配上下文参数，点击事件也不会触发。

Answer 1

.live() 方法需要实际的选择器来匹配元素。

试试这个:

$(".task-create-content .wtp").live('click',function(){
     alert("hi");
});

它使用文档根部的选择器来查看究竟是什么接收了点击事件。如果匹配，它会触发该选择器的处理程序。

您似乎是在直接为新创建的元素分配处理程序。如果您想这样做，请使用 .bind()。

$(".wtp",$block).bind('click',function(){
     alert("hi");
});

...这等同于:

$(".wtp",$block).click(function(){
     alert("hi");
});

---

编辑:

正确的 将 live() 事件限制到 $block 的几种方法是传递 $block 作为 live() 的第三个参数。

$(".wtp").live('click',function(){
     alert("hi");
}, $block); // The handler is placed on $block and fired for .wtp elements within

...这与使用 .delegate()

相同

  // The handler is placed on $block and fired for .wtp elements within
$block.delegate('.wtp', 'click', function(){
     alert("hi");
});

jQuery 的 .delegate() 只是更好地包装了将第三个参数传递给 .live()。它只是重新排序参数，并调用 .live()。

http://github.com/jquery/jquery/blob/master/src/event.js#L875