Question

我正在使用ajax加载内容，在将内容加载到#content div之后，我放在main.js上的效果对加载的内容无效。例如，这个不起作用：

/* 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加载内容和main.js具有效果

Answer 1

因为您正在向DOM注入一些新内容，并且它不了解您定义的悬停功能。

解决方案：使用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 2

在使用Ajax调用加载新内容后，您是否正在调用JavaScript代码。

当你致电$(".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);
});

Answer 3

您是否在加载完成回调中附加了这些事件？

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

Answer 4

这是因为您的代码所做的是将这些脚本附加到事件。但是，代码本身不会执行。你需要附上它。

尝试这样做，将整个代码封装在一个函数中。一旦你从ajax得到响应，把内容放在div中，同时调用你已经封装了整个javascript代码的javascript函数。这将导致代码绑定到事件。

现在你应该可以看到这些事件了。

Ajax加载内容，jquery效果不起作用

4 个答案: