Jquery.Hover не работает для динамического элемента

Вот мой код

$(".inboxfeedlist li").hover(function(e){alert('');}

Это не работает для динамически созданных элементов, даже я использую

$(".inboxfeedlist li").bind('hover',function(){})

тоже не работает, в чем проблема с кодом.


dynamic html jquery hover
person Wasim A.    schedule 01.11.2011    source источник
comment
Можете ли вы максимально точно смоделировать свою ситуацию на jsfiddle.net?   -  person Purag    schedule 02.11.2011

Ответы (8)


arrow_upward
3
arrow_downward

Используйте живой метод:

$(".inboxfeedlist li").live('hover', function(e){alert('');});

Примечание: hover требует двух функций обратного вызова, вы имели в виду mouseover

person topek    schedule 01.11.2011
comment
вы узнаете что-то новое каждый день..., все еще задаетесь вопросом, как это можно использовать? Еще не было проблемы, что бы потребовалось это. - person topek; 02.11.2011
comment
Я использую его, когда переключаю что-то вроде $(".menu li").hover(function(){$(".submenu",this).toggle()}). Поскольку переключатель зависит от текущего состояния элемента, его можно использовать для наведения и отвода курсора. - person Joseph Marikle; 02.11.2011
comment
Почему .live('hover' ... работает, но не .hover на динамическом элементе? - person borayeris; 06.02.2014
comment
Начиная с jQuery 1.7, метод .live() устарел. Используйте .on() для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать .delegate() вместо .live(). api.jquery.com/live - person Vlad Vinnikov; 12.04.2014

arrow_upward
36
arrow_downward

live устарели в jQuery 1.9. Вместо этого мы можем использовать on с событиями mouseenter и mouseleave:

$(document).on("mouseenter", ".save-btn", function(e) {
    $(this).css("background-image","url('ie/imgs/btn/hover-btn.png')");
    $(this).find("a").css("background-image","url('ie/imgs/btn/hover-btn-left.png')");
});

$(document).on("mouseleave", ".save-btn", function(e) {
    $(this).css("background-image","url('ie/imgs/btn/btn.png')");
    $(this).find("a").css("background-image","url('ie/imgs/btn/btn-left.png')");
});

По какой-то причине я не могу использовать hover с on. Это просто не работает. Но, судя по тому, что я читал, hover — это всего лишь адаптация mouseenter и mouseleave, так что все в порядке. (https://stackoverflow.com/a/4463384/1031340)

Если вам не нужна поддержка IE6, я рекомендую вам использовать :hover в вашем CSS (если это изменение только в CSS, как в примере выше).

person eduardomozart    schedule 13.03.2013
comment
Важно использовать событие для элемента, который не был изменен динамически. - person Dmitrii Malyshev; 09.09.2014
comment
В некоторых случаях, когда мы хотим показать/скрыть что-то, комбинация mouseenter/mouseleave работает лучше для меня. - person DIG; 29.04.2015
comment
mouseover не является правильным синтаксисом, следует использовать mouseenter: api.jquery.com/on/ #дополнительные-примечания - person Facundo Colombier; 19.05.2016

arrow_upward
3
arrow_downward

попробуйте вживую

$(".inboxfeedlist li").live('hover',function(){});
person swatkins    schedule 01.11.2011

arrow_upward
1
arrow_downward

Используйте delegate или live для привязки событий. Это гарантирует, что все, что добавляется динамически, также будет привязано к обработчику событий.

person Sam    schedule 01.11.2011

arrow_upward
1
arrow_downward

Похоже, вам нужно live или делегировать. Делегат предпочтительнее

$(document.body).delegate(".inboxfeedlist li", "hover", function(){
        alert('');
});
person Joseph Marikle    schedule 01.11.2011

arrow_upward
0
arrow_downward 

$('.inboxfeedlist li').live('hover', function(e) { alert(''); });

JQuery в прямом эфире

делегат jQuery

person jbabey    schedule 01.11.2011

arrow_upward
0
arrow_downward

Вы можете использовать что-то вроде этого:

$(document).on('mouseover','div.cover-wrapper',function(){
    $(this).css({'border':'1px solid #000'});
});


$(document).on('mouseout','div.cover-wrapper',function(){
    $(this).css({'border':'none'});
});
person Sandeep Pal    schedule 23.05.2013

arrow_upward
0
arrow_downward

Вот использование и подробности этих функций

http://api.jquery.com/live/

$(селектор).live(события, данные, обработчик); // jQuery 1.3+

$(документ).делегат(селектор, события, данные, обработчик); // jQuery 1.4.3+

$(документ).on(события, селектор, данные, обработчик); // jQuery 1.7+

person Khandad Niazi    schedule 29.01.2019