Question

我有一个页面，当点击导航项时，其中有一个导航栏可以将内容从另一个页面加载到content-div中。

来自其他页面的内容包含各种不同的div。其中一个div具有样式display: none。这个div位于另一个div之上。当我.mouseenter（）在隐藏div下面的div时，我需要隐藏的div到.fadeIn（）。

.load（）jQuery如下：

var workitem;
// When the navigationitem is clicked
$("ul.worklist li", this).click(function() {

// Get the id-attribute, to decide what div to load          
      workitem = $(this).attr("id");

// Declare a variable that describes the contents location
      var getitem = "work.aspx #" + workitem;
// Load the content with the .load function, and add some cool fadeIn effects
      $("#workcontent").load(getitem, function() {
            $(".webImg:hidden").delay(1000).fadeIn(200, function() {
                $(".logoImg:hidden").fadeIn(200, function() {
                    $(".printImg:hidden").fadeIn(200, function() {
                        $(".projBeskrivelse:hidden").fadeIn(800);
                    });
                });
            });
        });
// Do stuff to the navigation panel
        $(this).stop().animate({ color: '#000' }, 100);
        $(this).siblings("li").animate({ 'line-height': '24px', color: '#ddd' }, 300);
    });

div #workitem包含以下元素

<div class="webImg">
    <div class="webImgOverlay"><p>Go to website ►</p></div> <!-- This is the element that has the display: hidden attribute in it's class -->
    <img src="work/xxxxx_web_550_451.jpg" alt="" />
</div>
<div class="logoImg">
    <img src="work/let_logo_199_325.jpg" alt="" />
</div>
<div class="printImg">
    <img src="work/xxxxx_print_199_101.jpg" alt="" />
</div>
<div class="projBeskrivelse">
        <p class='header'>xxxxx</p>
        <p class='brodtekst'>This project is developed for the danish waiter rental company, xxxxx. The assigment included a redesign of their logo, their website and a general makeover of the visual identity. The project was made because xxxxx was expanding with a catering subdivision.</p>
</div>
</div>

现在，当.webImg div上的.mouseenter（）时，我希望发生以下情况：

$(".workitem", this).mouseenter(function() {
    $(".webImgOverlay").fadeIn(200);
});
$(".workitem", this).mouseleave(function() {
    $(".webImgOverlay").fadeOut(200);
});

但它似乎不起作用。这是因为内容是用ajax加载的吗？有没有办法用jQuery实现这个目标？

提前致谢

Answer 1

在您的情况下，使用.delegate()为动态添加到#workcontent的元素，如下所示：

$("#workcontent").delegate('.workitem', 'mouseenter', function() {
    $(".webImgOverlay").fadeIn(200);
}).delegate('.workitem', 'mouseleave', function() {
    $(".webImgOverlay").fadeOut(200);
});

在其他情况下，更通用的.live()有效：

$(".workitem").live('mouseenter', function() {
    $(".webImgOverlay").fadeIn(200);
}).live('mouseleave', function() {
    $(".webImgOverlay").fadeOut(200);
});

.mouseenter（）不适用于使用jQuerys .load（）函数加载的内容

1 个答案: