mcheah mcheah - 17 days ago 7
jQuery Question

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?

Answer

When you do this:

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

you're telling jQuery to look for the element with the block ID and bind the hover event to it. Once this is done, the event will remain bound to that element, no matter what happens to its ID afterwards.

That is, unless you have some code that unbinds it, of course.

Comments