Question

似乎一旦我将元素对象附加到页面，我就无法将其重新附加到页面的另一部分。这种行为有些奇怪。有谁知道造成这种情况的原因以及如何将对象重新附加到另一个元素？我已经尝试将对象复制到一个新的变量名称，但它仍然没有帮助。

这是代码：（应该将对象附加到div'，但只附加到第一个）

    var $e = $("<a/>")
        .append("<span>Link</span>")
        .attr("href","#")
        .click(function(e){
            e.preventDefault();
            alert('hi');
        });
    var $e2 = $e;
    $("div:first").append( $e );
    $("div:last").append( $e2 );

HTML：

    <div></div>
    <div></div>

小提琴：http://jsfiddle.net/6R75z/

Answer 1

每个对象都是唯一的，$e2只是对创建元素的引用。你应该.clone()收藏：

var $e2 = $e.clone();

要复制事件处理程序，您可以将true传递给clone方法。

Answer 2

您可以将创建包装在函数中：

function newATag() {
    return $("<a/>")
        .append("<span>Link</span>")
        .attr("href","#")
        .click(function(e){
            e.preventDefault();
            alert('hi');
        });
}

$("div:first").append( newATag() );
$("div:last").append( newATag() );

Answer 3

你创建$("a") dom并将元素追加到div第一个，然后你移动到第二个，那时它不会追加第一个，在这个上下文中你必须克隆对象并使用

 var $e = $("<a/>")
        .append("<span>Link</span>")
        .attr("href", "#")
        .click(function (e) {
        e.preventDefault();
        alert('hi');
    });
    var $e2 = $e;
    $("div:first").append($e);
    $("div:last").append($e2.clone(true));

无法重复使用元素对象？

3 个答案:

UPDATED DEMO