html - 悬停不适用于 AJAX

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

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

第二个参数用作过滤器来确定触发事件的选定元素。因此，当事件被触发时，它将传播到 document 或 jquery 选择的父元素。然后将使用作为第二个参数提供的选择器仔细检查事件目标。如果目标匹配第二个参数(在我们的例子中为 .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");   
     });