jQuery Forum

I'm trying to shrink some jQuery code by using replaceWith, instead of hiding and showing two different items. Since I'd never used replaceWith before, I created a test page, all it has has a div container, with class "one", and inside it the word One.

The jQuery code I wrote is below, it works to replace One with Two, when one is clicked. But clicking Two does nothing. I put in an alert to test what replacement is, and it is correct, a div with class of two. Yet still the second click doesn't return to One. Any ideas?

$(document).ready(function()
{
  var replacement;
  $(".one").click(function(event){
    replacement = '<div class="two">Two</div>';
    $(this).replaceWith(replacement);
  });
  $(".two").click(function(event){
    replacement = '<div class="one">One</div>';
    $(this).replaceWith(replacement);
  });
});

HTML:

<div class="one">One</div>


Thank you!