Jquery bind doesnt work on AJAX loaded HTML

Question

Hi,

This is my jquery code

jQuery(document).ready (function() {

   // post
    $('.post').bind('mouseenter mouseleave', function() {
        $(this).filter('.btn').toggleClass('hidden');
    });


});

It works great on a normal document. but When I load some HTM: (i.e some divs with .post attributes) using ajax and embed it into my DOM.

The above code doesnt work with those divs.

Answer 1

Your timing is probably off as the div with .post attributes must actually exist in the dom before you can bind anything to it.

Answer 2

Try using live:

jQuery(document).ready (function() {
    $('.post').live('mouseenter mouseleave', function() {
        $(this).filter('.btn').toggleClass('hidden');
    });
});

Or better yet delegate

jQuery(document).ready (function() {
    $('#posts').delegate('.post','mouseenter mouseleave', function() {
        $(this).filter('.btn').toggleClass('hidden');
    });
});