Html 悬停不在AJAX上工作

我有以下通过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>

---

当页面第一次加载时，脚本工作正常。但是，一旦在单击“a”标记后通过AJAX生成上述div，悬停效果就不起作用了。我好像不知道这里怎么了？这一切都是新的。有人能帮忙吗？

若要将这些事件处理程序附加到动态生成的元素，您需要绑定到

文档或另一个静态父元素，然后指定
.grid
作为传递给
.on
的第二个参数

第二个参数用作筛选器，以确定触发事件的选定元素。因此，当触发事件时，它将传播到jquery选择的
文档或父元素。然后，将使用作为第二个参数提供的选择器仔细检查事件目标。如果目标与第二个参数匹配（在本例中为
.grid
），则会触发事件

你可以在网上阅读更多

另外，由于您使用的是
document.ready
，因此不需要使用简写的ready语句
jquery（function（$）

您丢失了绑定，因为ajax使用class=“.grid”覆盖了您的div
使用父元素进行绑定

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

更多来自

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

不确定你在这里拍摄的是什么，但可能是一些格式错误的HTML造成的



标题
流派
$（函数（）{
美元（“.grid”）。在({
鼠标指针：函数（）{
警报（“输入”）；
$（this.find（'.meta'）.stop（）.animate({
底部：“0px”
}, 200);
},
mouseleave:function（）{
警惕（“左”）；
$（this.find（'.meta'）.stop（）.animate({
底部：'-75px'
}, 200);
}
}“.thumb”）；
});
});

确保关闭
img
标签。它们因间歇性故障而臭名昭著。
您可以使用
悬停功能：

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
，当用户从元素上取下鼠标时，如果您不想恢复效果。
@SunnyD我试图给出更好的描述，描述如何处理传播。基本上，这些事件会冒泡到我们用jquery选择的元素，然后检查目标（元素触发事件）。@SunnyD这个解释有用吗？还有什么问题吗？@SunnyD文档会比我解释得好10倍。我曾经尝试过使用hover，但它从来都不起作用。如果我错了，请纠正我，但我相信上面的代码只适用于页面加载，而不适用于AJAX调用的HTML。
$('.ParentElementClass').on("mouseleave", ".grid", function(){...})

<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");
     });
 });

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);
        }
    });   
});