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

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

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

у меня есть main div это меняет цвет, как только я наведу на него курсор. 

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

если нажать на кнопку main div ' S ID изменяется на block2:

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

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

12
jquery jquery-hover

4 ответов

при этом:

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

вы говорите jQuery искать элемент с block ID и привязать к нему событие наведения. После этого мероприятия останется привязана к этому элементу, не важно, что происходит с его ID потом.

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

18

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

пример:

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

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

демо: jsFiddle

обновление:

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

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

9

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

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

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

2