1

我希望克隆innerhtml一个元素 ( #clone) 并将其插入另一个元素 ( #newLocation)。

使用的问题clone()是我将首先删除当前在 中的元素（如果有的话）#newLocation，然后遍历每个元素#clone并将其附加到#newLocation. 这不是世界末日，但我希望有一种更简单的方法。

相反，我想我会使用html(). 由于这不会保留事件，我将不得不委托使用ON. 我原以为这会起作用，但是，它没有。

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

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

$(document).ready(function(){
    $("#cloneIt").click(function(){$('#newLocation').cloneInnerHtml('clone').css('color', 'red');});
    $("#clone a").click(function(){alert("click");});
    $("#clone select").change(function(){alert("change");});
});

(function( $ ){
    $.fn.cloneInnerHtml = function( id ) {
        this.empty();
        var $t=this;
        $('#'+id).each(function() {$t.append($(this).clone(true));});
        return this;
    };
})( jQuery );


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Clone INNERHTML</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" language="javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
    $("#cloneIt").click(function(){$('#newLocation').html($('#clone').html());});

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

    //Doesn't work at all
    $("#newLocation a").on("click", function(){alert("click");});
    $("#newLocation select").on("change", function(){alert("change");});

});

</script>

</head>
<body>
<input type="button" value="Clone it" id="cloneIt" />

<p>Original clone is shown below</p>
<div id="clone">
<a href="#">Click Me</a>
<select><option>Hello</option><option>Goodby</option></select>
</div>
<hr />
<p>Insert new clones below.</p>
<div id="newLocation">
<p class="someOldElement">someOldElement</p>
</div>

</body>
</html>
4

2 回答 2

2

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

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

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

相同的规则适用于代码

$("#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/一起复制

于 2012-04-25T14:37:54.337 回答
1

编辑：我让它与.onHere's a fiddle一起使用。另请查看.on 的 jQuery API并查看“直接和委托事件”部分

$("#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");});
于 2012-04-25T14:22:20.687 回答