Replacing one div with another

I have 2 divs in ma page. I want to show one and hide another. All happens in the same place ( position in page). I used replacewith. It works fine. But on the replaced div no jQu开发者_C百科ery actions/click works. So which is the best way to do this?

It seems like the show(), hide() methods would work fine here. Is there a reason that you need to replace the entire div?

$("#div1").hide();
$("#div2").show();

You could also do it with some style and call the toggle method to animate it a bit:

$("#div1").toggle("slow");
$("#div2").toggle("slow");

As mentioned in the comments, you can also toggle both with a single line of code:

$("#div1, #div2").toggle("slow");

<script>
$(function(){
    $("#show_first").bind('click', function(){
         $("#first").show();
         $("#second").hide();
    });
    $("#show_second").bind('click', function(){
         $("#second").show();
         $("#first").hide();
    });

    $("#inside").bind('click', function(){
        alert('works (first)');
    });
    $("#inside2").bind('click', function(){
        alert('works (second)');
    });
});
</script>
<div id="first" style="display:none"><span id="inside">Inside <-- click </span> -- first</div>
<div id="second" style="display:none"><span id="inside2">Inside <-- click </span> -- second</div>
<div id="show_second">Show second</div>
<div id="show_first">Show first</div>

demo