javascript - jQuery clone( true ) 不使用动态元素

Question

举个例子:

$.fn.foo = function() {

    var $input = $('<input type="text"/>');
    var $button_one = $('<button>One</button>');
    var $button_two = $('<button>Two</button>');

    $button_one.click(function(){
        $input.val('hey');
    });

    $button_two.click(function(){
        $input.replaceWith( $input.val('').clone( true ) );
    });

    this.append( $input, $button_one, $button_two );


};

查看演示:http://jsbin.com/ezexah/1/edit

现在单击“one”，您应该会在输入中看到“hey”。接下来点击“二”，然后再次点击“一”，它不起作用。即使在 clone 中使用 true 选项来复制所有事件，它仍然不起作用。有什么想法吗？

Answer 1

您没有更新 $input。它仍然引用您刚刚删除的元素，这意味着 $input.val('hey'); 将更新现在从 DOM 树分离的 DOM 元素的值。
.clone 或 .replaceWith 不会自动更新现有引用:

var $clone = $input.val('').clone( true )
$input.replaceWith($clone);
$input = $clone;

顺便说一句，这与 true 选项无关，因为您没有将任何事件处理程序绑定(bind)到 $input。

DEMO