Why do registered events disappear when an element is removed from DOM?

Question

This jQuery 1.3.2 code adds an element to the page, registers a "click" event, then removes and reattaches the element:

var button = $('<button>Click me!</button>')
  .click(function(){ alert("Hello") })
  .appendTo('body');

$('body').html('');

button.appendTo('body');

The button appears on the page as expected, but clicking on it does nothing. I would like to know why the event handlers were removed from the object.

Note: I am aware of solutions such as jQuery.live() or clone(true) or using appendTo without a removal. What I'm looking for is an explanation, not a solution or workaround.

EDIT: I suppose this could be an arbitrary and counter-intuitive design decision of the DOM. An explanation like "Because that's the way section X of specification Y wants it to be" would be fine.

Answer 1

Why wouldn't it? You removed the element, it's handlers go with it. It's as simple as that.

It's like saying you bought a Honda Civic and replaced the radio (click handler) with a better one (fancy pants jQuery-ified handler :)), now you trade in the Civic for a better model (one with a sun-roof or something) and expect your new radio to be there still... Well, it could be if you just make sure to re-install it in the new one.

Maybe that's an odd analogy... the point is just that event handlers are quite literally on the element. If you remove it, the new one is just that: new, and so if you think about it it would be quite annoying to have handlers added earlier magically applied to new elements without your knowledge (indeed, as you pointed out, that's what live is for).

Answer 2

When you remove an element from the DOM using jQuery, all data (including event handlers) held by jQuery on that element will be destroyed. This is done to avoid memory-leaks.

This isn't a feature (or bug) of the DOM API. It's just jQuery.