Question

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

现在我的HTML div块中存在某些点击事件，而crating事件我也使用了context参数

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)克隆此块时，即使我正在分配上下文参数，click事件也不会触发。

Answer 1

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

试试这个：

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

它使用文档根目录下的选择器来查看确切接收到click事件的内容。如果匹配，则触发该选择器的处理程序。

好像你直接为新创建的元素分配处理程序。如果您想这样做，请使用.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

Answer 2

首先，$block声明结尾处有一个无关的右括号：

var $block = ...  "</div>");

这会阻止整个页面无效。

第二次，如果您使用上下文作为live()的一部分，则上下文必须是单个DOM元素....它不能是字符串。要创建单个DOM元素，只需使用jQuery（$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>");

然后当你引用$block时，你将引用一个DOM元素。上下文不能简单地为$block，因为您希望将click函数绑定到实际位于相关页面上的$block，因此您必须指定$block /秒。为此，请使用$(".wtp", $block[0])。

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

我选择DOM中的第一个$block作为上下文。您可以将变量替换为索引，或者以其他方式执行此操作。

working jsFiddle example

使用克隆

我不会使用live()，而是使用bind()来处理克隆......就像这样：

请记住，$block在这种情况下也必须是DOM元素，因此您必须定义$block，如：

$block = $(" ... ");

然后您可以像这样使用和克隆$block：

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

$($block).clone(true).appendTo("body");

  // Let's change $block dynamically!
$("<div>Dynamic!</div>").appendTo($block);

$($block).clone(true).appendTo("body");

确保在克隆时包含true，以便表明也应复制事件处理程序。

jsFiddle example

克隆＆amp;带有上下文参数jquery 1.4的live函数

2 个答案:

使用克隆