Question

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

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');
    });
});