jQuery: прикрепить событие сразу после настройки содержимого HTML

Question

сначала это пример моего кода jQuery, который я использую в функции для разбивки на страницы:

// new_content is a variable that holds the html I want to add to a div
$('div#my_div').html(new_content);
$("div#my_div a.details").hover(function(){         
    $(this).fadeIn(); //code to execute when the mouse get in
}, function(){
    $(this).fadeOut(); //code to execute when the mouse get out
});  

НО событие hover не работает вообще, и я верю, что это вызвано тем, чтоDOM еще не готов!

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

$('div#my_div').html(new_content);

window.setTimeout(
  $("div#my_div a.details").hover(function(){           
    $(this).fadeIn(); //code to execute when the mouse get in
  }, function(){
    $(this).fadeOut(); //code to execute when the mouse get out
  });
,100); 

Я задал этот вопрос, потому что я уверен, что это не правильноспособ прикрепить событие сразу после html-метода (возможно, это не сработало!).

si Я надеюсь, что кто-то покажет мне правильный способ сделать это.

Answer 1

Может быть, вам нужно использовать метод live().Как вы можете прочитать здесь , похоже, вам нужно разделить два события:

.live("mouseenter", function() {...})
.live("mouseleave", function() {...});

ОБНОВЛЕНИЕ: Кто-то проголосовал за меня, так что если кто-то получитздесь я рекомендую прочитать документацию on() ( здесь ), поскольку live давно устарел.Также может быть интересно посмотреть mouseenter() ( ссылка ) и mouseleave() ( ссылка ).Идея такая же, как с live.

Answer 2

Вы хотели бы использовать живые mouseover mouseleave события

$("div#my_div").live({
       mouseenter: function()
       {

       },
       mouseleave: function()
       {

       }
    }
);

Также вы можете сделать:

$('div#my_div').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
        // do something on mouseover
    } else {
        // do something on mouseout
    }
});

ОБНОВЛЕНИЕ

В новых версиях jQuery вы можете сделать это следующим образом

$('body').on('mouseover','#my_div', function(){});
$('body').on('mouseout', '#my_div', function(){});

Answer 3

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

Вот пример использования делегата: http://jsfiddle.net/Akkuma/wLDpT/

Answer 4

вы можете проверить .live функцию jquery.Вот ссылка http://api.jquery.com/live/