Question

我希望克隆元素innerhtml并将其插入另一个元素（#clone）。

使用#newLocation的问题是，我将首先删除当前clone()中的元素（如果有），然后迭代#newLocation中的每个元素并将其追加到{{ 1}}。这不是世界末日，但我希望有一种更简单的方式。

相反，我认为我会使用#clone。由于这不会保留事件，因此我必须使用#newLocation委派偶数。我以为这会起作用，但事实并非如此。

有什么建议我做错了吗？另外，即使我可以使html()解决方案正常工作，使用ON解决方案会更有效率吗？

编辑：刚刚写了我的第一个插件：http://jsfiddle.net/Wnr65/这似乎有效。好主意用吗？当然可以写得更好。

clone()

Answer 1

您的代码没有按照您的意愿做出反应是正常的。当你这样做

$("#clone a").on("click", function() {
    alert("click");
});

它会将click事件绑定到与#clone a选择器匹配的元素。这些元素在执行时确定。在您的情况下，此行将事件绑定到页面中第一个也是唯一一个链接。

同样的规则适用于代码

$("#newLocation a").on("click", function() {
    alert("click");
});

但不同之处在于，在执行时，a 中有无#newLocation元素，因此选择为空且处理程序未绑定一点都不。

然后，当你做

$('#newLocation').html( $('#clone').html() );

它会从一个元素中获取HTML内容并将其复制到另一个元素中，但它只是关于HTML内容，因此事件绑定仍然与“复制操作”之前相同。

on方法有不同的语法，只有一个允许事件委托：

// get all current "a" elements inside the "#clone" // and bind the click event $( "#clone a" ).on( "click", handler ); // get the "#clone" element, bind a click event to it // BUT trigger the event only when the origin of the event is an "a" element // here the event delegation is enabled // it means that future "a" elements will trigger the handler $( "#clone" ).on( "click", "a", handler ); // if you want it to work with your code // you could do something like below // this add a click handler to all present and future "a" elements // which are inside "#clone" or "#newLocation" // but this is not the recommended way to do this, check below the clone method $("#clone, #newLocation").on("click", "a", handler);

clone方法不会删除元素，这是一个有效的演示http://jsfiddle.net/pomeh/G34SE/

HTML代码

<div class="source"> <a href="#">Some link</a> </div> <div class="target"> </div>

CSS代码

div { width: 100px; height: 25px; } .source { border: solid red 1px; } .target { border: solid blue 1px; }

Javascript代码

var $element = $("a"), $target = $(".target"), $clone; $element.on("click", function( ev ) { ev.preventDefault(); console.log("click"); }); $clone = $element.clone( true ); $clone.appendTo( $target );

该方法还会收到一个参数，指示是否应将事件处理程序与元素http://api.jquery.com/clone/一起复制

Answer 2

编辑：我让它与.on一起使用这是一个fiddle。另请查看jQuery API for .on并查看“直接和委派活动”部分

$("#clone a").on("click", function(){alert("click");});
$("#clone select").on("change", function(){alert("change");});

$("#newLocation").on("click", "a", function(){alert("click");});
$("#newLocation").on("change", "select", function(){alert("change");});

复制HTML并保留事件

2 个答案: