AJAX中的悬停效果无法正常工作

Question

AJAX中的悬停效果无法正常工作

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”标签生成上面的div后，悬停效果将不起作用。我似乎无法找出问题所在？对此完全陌生。有人能帮忙吗？

- SunnyD

4个回答

0

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

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

更多来自jquery api

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

- Alex Kneller

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标签。它们往往会导致间歇性故障。

- DevlshOne

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。

- Mohammad Areeb Siddiqui

我尝试使用hover，但它从未起作用。如果我有错，请纠正我，但我相信上面的代码只能在页面加载时工作，而不能在AJAX调用的HTML上工作。 - SunnyD

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kevin Bowersox · Accepted Answer

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

第二个参数用作筛选器来确定触发事件的选定元素。因此，当事件被触发时，它将传播到由jquery选择的document或父元素。然后，使用提供的选择器作为第二个参数对事件目标进行仔细检查。如果目标与第二个参数匹配（在我们的情况下是.grid），则触发事件。

您可以在jQuery文档中阅读更多信息。

此外，由于您正在使用document.ready，因此不需要使用简短的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");   
     });