Ajax charge le contenu, les effets jquery ne fonctionne pas

Question

Je charge du contenu avec ajax, après il charge le contenu à un div #content, les effets que j'ai mis sur mon main.js ne fonctionne pas sur le contenu chargé. par exemple celui-ci ne fonctionne pas:

/* 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); 
}); 

Lorsque je teste l'effet sur la page sans que le contenu en cours de chargement avec ajax il fonctionne bien. Donc, le problème c'est que c'est chargé de cette façon.

Comment puis-je résoudre ce problème?

J'utilise deux fichiers: loader.js pour charger le contenu et l'main.js qui a les effets

Answer 1

Appelez-vous le code JavaScript après que le nouveau contenu est chargé avec l'appel Ajax. Lorsque vous appelez $(".item").hover, il l'ajoute aux éléments qui EXIST à ce moment-là. Il ne trouve pas les éléments qui existent après son appel.

Si vous utilisez jQuery 1.7+, vous pouvez l'utiliser et l'attacher au corps et il devrait commencer à fonctionner. Dans 1.8, hover est obsolète, vous devez donc attacher les événements de la souris séparément.

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

Answer 2

Parce que vous injectez un nouveau contenu au DOM et il est pas au courant de la fonctionnalité de vol stationnaire vous avez défini.

Solution: utiliser jQuery on

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

Answer 3

Ceci est dû au fait que votre code est en train d'attacher ces scripts aux événements. Cependant, le code ne s'exécutera pas tout seul. Vous devez l'attacher.

Essayez de le faire, Encapsuler le code entier dans une fonction. Une fois que vous obtenez une réponse d'ajax, mettez le contenu dans div et en même temps, appelez la fonction javascript dans laquelle vous avez encapsulé l'ensemble du code javascript. Cela entraînera le code à lier à l'événement.

Vous devriez maintenant pouvoir voir les événements.

Answer 4

Attendez-vous ces événements sur le rappel de chargement complet?

$("#content") 
    .load("remote_content.htm", function() { 
     $(".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); 
     }); 
    });