Question

I have created a jsfiddle as I thought it would be the best way to show the problem. Basically, the script can change the button, but after the button changes, the header does not change. I am assuming it’s because the original button is been replaced:

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

Is it possible to somehow capture the original button so it can be used to remove replace the header even after the button has been removed?

Answer 1

Try changing your function like below,

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" );
}

DEMO