Измените идентификатор элемента, но jQuery все еще запускает событие, вызывающее старый идентификатор. Почему это работает?

Я создал скрипку, чтобы попытаться отладить проблему, с которой я столкнулся, когда однажды я перестраиваю html-элементы с помощью jQuery, события наведения на этих элементах больше не работают.

Однако я столкнулся с этой интересной ситуацией: http://jsfiddle.net/4yv1trj4/

У меня есть основной div, который меняет цвет, когда я навис над ним.

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

Если вы нажмете кнопку, основной идентификатор div изменится на block2:

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

но $("#block").hover() по-прежнему срабатывает, когда я нахожусь над #block2. Кроме того, все зависания на #block2 не работают. Существует ли фундаментальный принцип работы jQuery, который бы объяснил это?

Ответы

Ответ 1

Когда вы это сделаете:

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

вы сообщаете jQuery искать элемент с идентификатором block и привязывать к нему событие hover. Как только это будет сделано, событие останется связанным с этим элементом, независимо от того, что произойдет с его идентификатором впоследствии.

То есть, если у вас нет кода, который развязывает его, конечно.

Ответ 2

Как расширение ответа lucasnadalutti: стоит отметить, что вы можете добавить привязку к контейнеру и получить ожидаемый результат:

Пример:

$("body").on("mouseenter", "#block", function () {
    $(this).css("backgroundColor", "red");
}).on('mouseleave', "#block", function () {
    $(this).css("backgroundColor", "#888");
});

Обратите внимание на привязку на body, а не на фактический элемент. Трюк, который нужно держать в заднем кармане.

Демо: jsFiddle

Обновление:

В разделе комментариев ясно, что требуется предупреждение - вы должны привязать к ближайшему элементу страницы. body использовался здесь как простой пример.

Хотя я думаю, что это решение подойдет вам элегантно, вы должны прочитать Должны ли все события jquery привязываться к $(документу)? до вы начинаете злоупотреблять этой властью.

Ответ 3

Если вы удалите прослушиватель jQuery hover и добавьте наведение CSS, оно будет работать так, как вы хотите:

#block:hover {
    background-color:red;
    width:300px;
    height:300px;
}

Ответ 4

$("#block") ищет конкретный объект DOM. .hover() свяжет событие hover с этим объектом DOM. $("#block").attr("id","block2"); изменит атрибут (id) этого объекта DOM, но событие hover все еще привязано к нему.