[英]Using .on to bind to dynamically generated content
我使用无限滚动显示一些内容,我无法将一些mouseenter / mouseleave事件绑定到新生成的项目。
我知道我需要将.on绑定到页面上已存在的容器,但是我无法找出改变当前切换的jQuery的语法。
这是当前的js:
$(document).ready(function() {
$('.grid-box .actions').hide();
$('.grid-box').on({
mouseenter: function () {
$(this).find('.actions').show();
},
mouseleave: function () {
$(this).find('.actions').hide();
}
});
});
主容器是#grid-container,每个单独的项目都是.grid-box。 如何改变上述内容,以便在进入/离开.grid-box时显示/隐藏动作?
我想我需要的东西是这样的:
$('#grid-container').on('mouseenter mouseleave', '.grid-box', function(e) {
// some action
});
确切地说,这称为事件委派,它等待事件冒泡然后根据选择器匹配事件。 这样效率更高,因为只注册了一个处理程序,而不是元素数量的N倍。 此外,您只需绑定一次,而不是每次更改动态内容。
$('#grid-container').on('mouseenter', '.grid-box', function(e) {
// some action
}).on('mouseleave', '.grid-box', function(e) {
// some action
});
作为第二个参数的选择器仍然有效:
$('#grid-container').on({ ...}, '.grid-box');
另一种方法就是单独绑定它们,我个人认为更清楚:
$("#grid-container").on('mouseenter', '.grid-box', function () {})
.on('mouseleave', '.grid-box', 'function () {});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.