jQuery & replaceWith(): reloading page every other time

This code reloads the entire page rather than simply replacing the #form element every other time. Can someone suggest a fix so that only #form is replaced and the entire page not reloaded?

jQuery:

  $("#login").submit(function() {
    $.post($(this).attr("action"), $(this).serialize(), function(html) {
        var htmlString = (new XMLSerializer()).serializeToString(html);
        $("#form").replaceWith(htmlString);
        $("html, body").animate({
          scrollTop: $("#message").offset().top
        }, 500);
    });
    return false;
  });

HTML:

<div id="form">
  <form id="login" action="submit.php" method="开发者_StackOverflowpost">
    <input type="text" name="name">
    <button type="submit">Submit</button>
  </form>
</div>

It doesn't seem to me that replaceWith() would eliminate the bindings, but perhaps it does . . .

It doesn't seem to me that replaceWith() would overwrite the bindings, but perhaps it does . . .

Inherently.

You bound an event to a DOM node, then replaced that DOM node with something else (which had no bindings).

Try .live for auto-rebinding ^{(can't think of a better term)} the event handlers to the DOM node matching a given selector, at any point in time that such a match comes into existence.

your form has an id attribute forms <div id="forms">

but your jquery selector targets form $("#form").replaceWith(htmlString);