3

我有以下通过 AJAX 加载的内容。

<div class="grid">
    <div class="thumb">
        <img alt="AlbumIcon" src="some-image.jpg">
        <div style="bottom:-75px;" class="meta">
            <p class="title">Title</p>
            <p class="genre"> <i class="icon-film icon-white"></i>
                Genre
            </p>
        </div>
    </div>
</div>

此外，我在 jquery 中编写了以下适用于上述 'div.grid' 的脚本。

 jQuery(function ($) {

    $(document).ready(function () {
        $(".grid").on({
            mouseenter : function () {
                $(this).find('.meta').stop().animate({
                    bottom:'0px'
                },200);
            },

            mouseleave : function () {
                $(this).find('.meta').stop().animate({
                    bottom:'-75px'
                },200);
            }
        });   
     });  
  });

页面第一次加载时脚本运行良好。但是，在单击“a”标签后通过 AJAX 生成上述 div 后，悬停效果将不起作用。我似乎无法弄清楚这里有什么问题？这一切都是新的。任何人都可以帮忙吗？

4

4 回答 4

4

要将这些事件处理程序附加到动态生成的元素，您需要绑定到该document或另一个静态父元素，然后指定.grid为传递给.on.

第二个参数用作过滤器来确定触发事件的选定元素。因此，当事件被触发时，它将传播到documentjquery 选择的或父元素。然后将使用作为第二个参数提供的选择器检查事件目标。如果目标与第二个参数（.grid在我们的例子中）匹配，则触发事件。

您可以在jQuery 文档中阅读更多内容。

此外，由于您使用document.ready的是速记准备语句，因此不需要jquery(function($).

 $(document).ready(function () {
    $(document).on({
                mouseenter : function () {
                    $(this).find('.meta').stop().animate({
                        bottom:'0px'
                    },200);
                },

                mouseleave : function () {
                    $(this).find('.meta').stop().animate({
                        bottom:'-75px'
                    },200);
                }
            }, ".grid");   
     });
于 2013-07-09T09:28:51.530 回答
0

您可以使用以下hover功能：

jQuery(function ($) {

$(document).ready(function () {
    $(".grid").hover(function () { /*mouseenter*/
            $(this).find('.meta').stop().animate({
                bottom:'0px'
            },200);
        },function(){ /*mouseleave*/
            $(this).find('.meta').stop().animate({
                bottom:'-75px'
            },200);
        }
    });   
});

解释：

第一个参数函数做的工作，mouseenter第二个做的工作mouseleave。

我建议同时使用这两者，mouseenter并且mouseleave在用户从元素上移开鼠标时不希望效果恢复的情况下。

于 2013-07-09T09:41:44.143 回答
0

由于 ajax 使用 class=".grid" 覆盖您的 div 使用父元素进行绑定，您丢失了绑定

$('.ParentElementClass').on("mouseleave", ".grid", function(){...})

更多来自jquery api

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他 HTML 之前，文档元素在文档头部是可用的，因此在此处附加事件是安全的，而无需等待文档准备好。

于 2013-07-09T09:31:51.553 回答
0

不知道你在这里拍摄什么，但可能是一些格式不正确的 HTML 完成了它......

jsFiddle 演示

<div class="grid">
    <div class="thumb">
        <img alt="AlbumIcon" src="some-image.jpg" />
        <div style="bottom:-75px;" class="meta">
            <p class="title">Title</p>
            <p class="genre"><i class="icon-film icon-white"></i>Genre</p>
        </div>
    </div>
</div>
     $(function () {
         $(".grid").on({
             mouseenter: function () {
                 alert('entered');
                 $(this).find('.meta').stop().animate({
                     bottom: '0px'
                 }, 200);
             },

             mouseleave: function () {
                 alert('left');
                 $(this).find('.meta').stop().animate({
                     bottom: '-75px'
                 }, 200);
             }
         }, ".thumb");
     });
 });

一定要关闭img标签。它们因引起间歇性故障而臭名昭著。

于 2013-07-09T09:31:56.600 回答