1

我正在使用 ajax 加载内容，在将内容加载到#contentdiv 之后，我放在我的效果上的效果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具有效果的文件

4

4 回答 4

2

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

解决方案：使用 jQueryon

$(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-12T13:50:33.720 回答
2

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

当您调用$(".item").hover它时，它会将其添加到当时存在的元素中。它不会找到调用后存在的元素。

如果您使用的是 jQuery 1.7+，您可以使用 on 并将其附加到主体上，它应该可以开始工作了。在 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-12T13:50:59.523 回答
1

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

$("#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-12T13:56:48.717 回答
0

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

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

现在您应该能够看到这些事件。

于 2012-10-12T13:52:23.097 回答