Question

我有以下内容通过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，则悬停效果不起作用。我似乎无法弄清楚这里有什么问题？这一切都是新的。有人可以帮忙吗？

Answer 1

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

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

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

此外，由于您使用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");   
     });

Answer 2

由于ajax用class =“。grid”覆盖你的div，你丢失了绑定使用父元素进行绑定

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

更多来自jquery api

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

Answer 3

不确定你在这里拍摄的是什么，但有点格式错误的HTML可能已经完成了......

jsFiddle Demo

<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个标签。他们因引起间歇性故障而臭名昭着。

Answer 4

您可以使用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。

悬停不在AJAX上工作

4 个答案:

说明：