jquery - ボタンを削除する前にキャプチャしますか？

Question

問題を示すのに最適な方法だと思ったので、jsfiddleを作成しました。基本的に、スクリプトはボタンを変更できますが、ボタンが変更された後、ヘッダーは変更されません。元のボタンが置き換えられたためだと思います。

http://jsfiddle.net/cEu8f/5/

どういうわけか元のボタンをキャプチャして、ボタンが削除された後でもヘッダーを削除して置き換えるために使用できるようにすることは可能ですか？

Answer 1

要素をキャッシュできますouter_div（例）。

$('#some_button').live('click', function() {
    some_function( $(this) );
});

function some_function( that ) {
    var $outer_div = that.closest('.outer_div');

    $outer_div
        .find('.main')
        .empty()
        .append( '<input type="button" id="some_other_button" value="click me 2" />' )
        .end()
        .find('.header')
        .empty()
        .append( "new header data" );
}

機能にも注目して.end()ください。;）

Answer 2

以下のように関数を変更してみてください。

function some_function( that ) {
    var $outerDiv = that.closest('.outer_div');
    $outerDiv.find('.main').empty().append( '<input type="button" id="some_other_button" value="click me 2" />' );    
    $outerDiv.find('.header').empty().append( "new header data" );
}

デモ

Answer 3

これはthat、DOMから要素を削除すると、要素が存在しなくなったために発生します。divただし、親要素を「キャッシュ」することはできます。

function some_function( that ) {
    var div = that.closest('.outer_div');
    div.find('.main').empty().append( '<input type="button" id="some_other_button" value="click me 2" />' );     
    div.find('.header').empty().append( "new header data" );
}​

デモ：http： //jsfiddle.net/cEu8f/7/