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

现在单击“一个”，您应该在输入中看到“嘿”。接下来点击“二”，再点击“一”，还是不行。即使使用true选项clone来复制所有事件，它仍然不起作用。有任何想法吗？

Answer 1

你没有更新$input。它仍然指的是您刚刚删除的元素，这意味着$input.val('hey');将更新现在从 DOM 树中分离出来的 DOM 元素的值。
.clone或.replaceWith不自动更新现有参考：

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

这与选项 btw 无关true，因为您没有将任何事件处理程序绑定到$input.

演示