Question

I have a simple mouseover event that I am trying to work on elements that are loaded with ajax. For example I have a div that when you mouseover hide/show another div. When I load these divs through ajax they no longer work. For example :

<div class="block">
    <div class="something">MOUSEOVER</div>
    <div class="else" style="display: none" >HI</div>
</div>

$(document).ready(function(){
    //using on hoping to catch the mouse events
    $('.block').on('mouseenter',function(){
        $(this).children('.else').fadeIn('fast');
    });
    $('.block').on('mouseleave',function(){
        $(this).children('.else').fadeOut('fast');
    });
});

This works fine straight up like this :

But when I load those elements from another page :

$j('#trigger').load( url + " .block");

The mouse events are no longer recognized. I thought this is what live, on, delegate were for. Can someone help me figure this out please.

Answer 1

One possibility is to change your code like:

var myFunc = function() {
    $('.block').on('mouseenter',function(){
        $(this).children('.else').fadeIn('fast');
    });
    $('.block').on('mouseleave',function(){
        $(this).children('.else').fadeOut('fast');
    });
}

$('#trigger').load(url + " .block", function() {
    myFunc();
});

to make this functions like mouseenter or mouseleave in the loaded content possible.

The other possibility is $.live();. Like:

$('.block').live('mouseenter', function() {
   //here your code
});