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')

});

多个位置的jQuery $（'element'）。one（）事件调用

1 个答案: