Change element ID, but jQuery still fires event calling old ID. Why does this work?

I created a fiddle to try to debug a problem I'm having where once I rearrange html elements with jQuery, hover events on those elements don't work anymore.

However, I came across this interesting situation here: http://jsfiddle.net/4yv1trj4/

I have a main div that changes color once I hover over it.

$("#block").hover(function() {
     $(this).css("backgroundColor", "red");
}, function() {
    $(this).css("backgroundColor", "#888");
});

If you click the button, the main div's ID changes to block2:

$("#block").attr("id","block2");

but $("#block").hover() still fires when I hover over #block2. Also, all hover calls on #block2 do not work. Is there a fundamental principle of how jQuery works that would explain this?