Question

我有一个带有某个数据属性的div，名为 data-id，，在jQuery中我有一个名为 newly_saved_itinerary 的变量，它包含该ID。

我动态创建一个具有该ID的div，并且在同一个函数中，当用户将鼠标悬停在其上时，我想要做一些事情。但是，我只想将此函数绑定到元素一次，如果元素已经有一个事件绑定，我想什么都不做。

此处发布了类似问题：How to check if click event is already bound - JQuery

有人建议第一次设置CSS类，如果CSS类已经存在，则不运行该函数。这是我尝试过的，但它不起作用：

$('div[data-id="' + newly_saved_itinerary + '"]:not(.hover_bound)').addClass('hover_bound').bind({
    mouseenter: function (e) {
        $('div[data-id="' + newly_saved_itinerary + '"] > .it-bar-buttons').fadeToggle();
    },
    mouseleave: function (e) {
        $('div[data-id="' + newly_saved_itinerary + '"] > .it-bar-buttons').fadeToggle();
    }
});

更新

我尝试使用ONE作为有人建议，但它没有做到这一点。我的问题是我用这个函数创建了多个元素，它似乎每次重新绑定所有元素，而不是每个元素只绑定一次。这就是我现在尝试过的，在2-3次盘旋之后，它根本没有切换：

$('div[data-id="' + newly_saved_itinerary + '"]').one({
    mouseenter: function (e) {
        $('div[data-id="' + newly_saved_itinerary + '"] > .it-bar-buttons').fadeToggle();
    },
    mouseleave: function (e) {
        $('div[data-id="' + newly_saved_itinerary + '"] > .it-bar-buttons').fadeToggle();
    }
});

Answer 1

您应该将偶数处理程序绑定到动态附加div的父级，例如：

$('div-parent').on('hover', 'div-inserted', function(){
    // handler code here
});

“on”的第一个参数是事件类型，第二个是此处理程序将绑定的子元素的引用，第三个是触发事件时将执行的回调函数。

这样一来，绑定只会对应该响应的元素而不是它们的父元素进行，所以你可以动态地删除或添加任意数量的子元素，它们会神奇地响应事件。

Answer 2

使用.one()

将处理程序附加到元素的事件。处理程序已执行每个事件类型每个元素最多一次。

$('div[data-id="' + newly_saved_itinerary + '"]').one('hover', function () {
    //code
}, function () {
    //code
});

jQuery - 如何只将函数（悬停）绑定到元素一次？

2 个答案: