Question

I’m loading content with ajax, after it loads the content to a #content div, the effects that I put on my main.js doesn’t work over the loaded content. for example this one doesn’t works:

/* Artworks Hide/show text */
$(".item").hover(function() {
  //fadein second image using jQuery fadeIn 
  $(this).find(".art_title").fadeIn(200);
}, 
function () {
  //fadein first image using jQuery fadeIn
  $(this).find(".art_title").fadeOut(200);
});

When I test the effect over the page without the content being loaded with ajax it works well. So the problem it’s that is loaded via that way.

How can I fix it?

I’m using two files: loader.js to load the contents and the main.js which has the effects

Answer 1

Are you calling the JavaScript code after the new content is loaded with the Ajax call.

When you call $(".item").hover it adds it to the elements that EXIST at that moment in time. It does not find elements that exist after it is called.

If you are using jQuery 1.7+, you can use on and attach it to the body and it should start working. In 1.8, hover is deprecated so you should attach the mouse events separately.

$(document).on("mouseenter", ".item", function() {
    $(this).find(".art_title").stop().fadeIn(200);
}).on("mouseleave", ".item", function () {
    $(this).find(".art_title").stop().fadeOut(200);
});