Ajax加載內容，jQuery效果不起作用

我在加載ajax的內容後，它將內容加載到#content div後，我放在main.js上的效果對加載的內容無效。例如這一個不起作用：Ajax加載內容，jQuery效果不起作用

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

當我在頁面上測試效果，沒有內容加載ajax它效果很好。所以這個問題就是通過這種方式加載的。

我該如何解決？

我用兩個文件：loader.js加載的內容，並具有影響

來源

2012-10-12 codek

原因很明顯，javascript代碼根本不會執行。看到我的答案爲解決方案。 –

你調用JavaScript代碼的加載新內容與Ajax調用後。

當你打電話給$(".item").hover時，它會將它添加到那個時刻的EXIST元素中。在調用它之後，它找不到存在的元素。

如果您使用jQuery 1.7+，您可以使用並將其附加到正文，它應該開始工作。在1.8中，懸停已被棄用，因此您應該單獨附加鼠標事件。

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

來源

2012-10-12 13:50:59 epascarello

它適用於這個問題，但懸停做了一些奇怪的事情，它徘徊在其他項目..（？）我使用1.8，這是因爲這個？我如何解決它的1.8？ – codek

因爲你注入一些新的內容到DOM的main.js，它不知道你定義的懸停功能。

解決方案：使用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); 
    }); 
});

來源

2012-10-12 13:50:33 Shyju

這是因爲你的代碼所做的是將它附加到事件中。但是，代碼不會自行執行。你需要附加它。

嘗試這樣做，將整個代碼封裝在一個函數中。一旦你從ajax得到響應，把內容放在div中，同時調用你封裝了整個javascript代碼的javascript函數。這將導致代碼綁定到事件。

現在你應該能夠看到事件。

來源

2012-10-12 13:52:23

您是否在加載完成回調中附加了這些事件？

$("#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); 
     }); 
    });

來源

2012-10-12 13:56:48

Ajax加載內容，jQuery效果不起作用

回答

相關問題