1

コードの一部は千語よりも優れているので

// this is our dynamic created element.,
var $test = $('<button>If you add this event is working, if you remove this, and add again, event is not working...</button>');

// this is our event
$test.click(function(){
    alert('Fooobar'); // fires only first time
});
// $test.on('click',function(){ <-- same behaviour

$('#add').click(function(){
    $('#container').append( $test );
});
$('#remove').click(function(){
    $('#container').html(''); // This is destroying all $test events!!!
});

要素を削除して再度追加し、イベントを保存するにはどうすればよいですか？

JSフィドル：

イベントを破壊せずに要素を削除したい。

4

3 に答える 3

3

jQueryのdetachメソッドを探していると思います。

.detach（）メソッドは.remove（）と同じですが、.detach（）が削除された要素に関連付けられたすべてのjQueryデータを保持する点が異なります。このメソッドは、削除された要素を後でDOMに再挿入する場合に役立ちます。

コード$testの前にデタッチできるので、すべてのイベントをアタッチしたまま再挿入できます。$('#container').html('');$test

于 2012-09-16T17:11:59.213 に答える
1 
var $test = $('<button>If you add this event is working, if you remove this, and add again, event is not working...</button>');
              
// here you've to use delegate event
// using jQuery on() method

$('#container').on('click', $test, function(){
    alert('Fooobar');
});

$('#add').click(function(){
    $('#container').append( $test );
});
$('#remove').click(function(){
    $('#container').html('');
});

デモ

デリゲートイベント（別名ライブイベント）on()の処理には、次のように使用する必要があります。

$(Parent).on(eventName, target, handler);

これは、へのコンテナであり、がバインドされるParent要素である静的要素です。targettargetevent

jQuery on（）メソッドの詳細をご覧ください。

次のこともできます

var $test = $('<button>If you add this event is working, if you remove this, and add again, event is not working...</button>');

$('#add').click(function() {
    $('#container').append($test.on('click', function() {
        alert('Fooobar');
    }));
});
$('#remove').click(function() {
    $('#container').html('');
});

デモ

于 2012-09-16T17:04:13.470 に答える
-2

イベントの関数を親要素にバインドします。

$('body').on('click', 'button', function(){
    alert('Delegated Click function');
});

buttonセレクターと交換してください。

于 2012-09-16T17:02:12.227 に答える