javascript - jQuery $ ('element' ).one() 来自多个位置的事件调用

Question

我有一些模态在第二次打开时有奇怪的行为，它从我没有预料到的位置调用 .one() 事件。

第一次点击 .modal-trigger 时一切正常，与点击 .close-modal, .modal-sandbox 相同。但是当我再次点击 .modal-trigger 时，jQuery 从 modalBox.one('animationend transitionend'); 调用回调；

$(".modal-trigger").on('click', function (e) {
    e.preventDefault();
    let modalWindow = $($(this).attr("href"));
    let modalBox = modalWindow.find('.modal-box');
    let sidebarWidth = $aside.width();

    $("body").css({"overflow-y": "hidden"}).addClass('blurred');

    if ($(window).width() >= 992) {
       modalBox.css({"margin-left": `${sidebarWidth}px`});
    }

    animateCSS(modalWindow, 'showing', function (element) {
        element.addClass('show').removeClass('showing');
        modalBox.addClass('show');
    });
});

 $(".close-modal, .modal-sandbox").on('click', function () {
    let modalWindow = $(this).closest('.modal');
    let modalBox = modalWindow.find('.modal-box');

    modalBox.one('animationend transitionend', function () {
        modalBox.removeAttr('style');
        modalWindow.removeClass('show');
        $("body").css({"overflow-y": "auto"}).removeClass('blurred');
    });

    modalBox.removeClass('show');
});

function animateCSS(element, animationName, callback) {
    element = $(element);
    element.addClass(animationName);

    function handleAnimationEnd() {
        element.removeClass(animationName);

        if (typeof callback === 'function') callback(element);
   }

    element.one('animationend transitionend', handleAnimationEnd);
}

Answer 1

如果您多次调用one()...每次调用都会运行一次。

添加监听器，然后使用 off() 将其删除

 modalBox.on('animationend transitionend', function () {
    modalBox.removeAttr('style');
    modalWindow.removeClass('show');
    $("body").css({"overflow-y": "auto"}).removeClass('blurred');
    // remove listener
    modalBox.off('animationend transitionend')

});