1

次の例を見てください。

$.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」が表示されます。次に「2」をクリックしてから、もう一度「1」をクリックしても機能しません。trueオプションを使用してcloneすべてのイベントをコピーしても、まだ機能しません。何か案は？

4

1 に答える 1

2

を更新していません$input。削除したばかりの要素をまだ参照しています。これ$input.val('hey');は、DOM ツリーから切り離された DOM 要素の値を更新することを意味します。
.cloneまたは.replaceWith既存の参照を自動的に更新しない:

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

trueイベントハンドラを にバインドしていないため、これはオプション btwとは関係ありません$input。

デモ

于 2012-10-31T05:01:57.180 に答える