Question

我有一个页面，其中一个div HTMl从另一个页面加载。在父页面中，我有javascript，其中包含适用于动态内容的元素（例如鼠标悬停动画等）。我一直试图让它工作几个小时，但它只是不起作用。 Chrome开发人员工具中没有JS错误。有人可以帮忙吗？

例如，在父页面的javascript上我有：

jQuery("ul#nav li.page a").on('mouseover', '.item', function () {
    jQuery(this).stop(true, true).animate({
        backgroundPosition: "(0 0)"
    }, 500);
    jQuery(this).animate({
        backgroundPosition: "(0 -35px)"
    }, 750);
}, function () {
    jQuery(this).animate({
        backgroundPosition: "(0 -120px)"
    }, 750)
});

和从

加载HTML的“子”页面

<li class="page"><a href="home" style="margin:0 22px 0 0" class="item">Home</a></li>
<li class="page"><a href="about" class="item">About Us</a></li>
<li class="page"><a href="store" class="item">Store</a></li>
<li class="page"><a href="news" class="item">News</a></li>
<li class="page"><a href="contact" style="margin:0 0 0 22px" class="item">Contact</a></li>

非常感谢您的帮助！

Answer 1

尝试使用＆＃39;委托＆＃39;方法而不是＆＃39; on＆＃39;。

jQuery(body).delegate('ul#nav li.page a', 'mouseover', function () {
    jQuery(this).stop(true, true).animate({
        backgroundPosition: "(0 0)"
    }, 500);
    jQuery(this).animate({
        backgroundPosition: "(0 -35px)"
    }, 750);
}, function () {
    jQuery(this).animate({
        backgroundPosition: "(0 -120px)"
    }, 750)
});

Answer 2

如果您希望将.on操作附加到动态元素，请将其附加到$（文档）。加载新元素时，操作已经存在。

jQuery(document).on('mouseover', 'ul#nav li.page a', function () {
    jQuery(this).stop(true, true).animate({
        backgroundPosition: "(0 0)"
    }, 500);
    jQuery(this).animate({
        backgroundPosition: "(0 -35px)"
    }, 750);
}, function () {
    jQuery(this).animate({
        backgroundPosition: "(0 -120px)"
    }, 750)
});

Answer 3

尝试使用：

jQuery("ul#nav li.page a").on('mouseover', '.item', function () {
    jQuery(this).stop().animate({
        backgroundPosition: "(0 -35px)"
    }, 750);
}, function () {
    jQuery(this).stop().animate({
        backgroundPosition: "(0 -120px)"
    }, 750)
});

JavaScript不处理动态内容

3 个答案: