我的.remove（）事件不起作用

Question

我创建了一个自定义模式对话框，该对话框在调用时会添加到屏幕上或从屏幕上删除。 但是，当我尝试删除它时，删除功能在某些情况下似乎不起作用。

这是模态中的关闭功能（通过单击关闭按钮触发）：

function modal_close() {
  $('.custom_block_page').fadeOut().remove();
  $(this).parent().fadeOut().remove();
};

这是我从模式对话框中的按钮调用该函数的方式：

MatchGame.closeWin = function() {
  $('.custom_modal_close').trigger('click');
  MatchGame.playGame();
};

如果我只单击关闭按钮，则对话框将被删除，并且一切都会按预期进行。 但是，当我触发关闭操作时，对话框将消失为空，但仍保留在主体中，因此在下次调用该对话框时会再次显示。

检查控制台之间我得到：

$('.custom_block_page').length
1  // displayed the first time
$('.custom_block_page').length
0  // during the 2nd game (expected)
$('.custom_block_page').length
2  // displayed after the 2nd game; I expect this to be 1

我尝试在playGame上设置超时，但这似乎也无济于事。

谢谢您的帮助！

Answer 1

您观察到的问题.fadeOut()于.fadeOut() ，它在一系列更高版本的事件线程中异步实现。

同时，在原始事件线程.remove() ，从该函数返回的后续语句以及该函数的调用.fadeOut()后续语句在ALL 同步执行-在.fadeOut()完成之前。

解决方案是利用.promise() ，它将返回一个jQuery .promise() ，您可以从中链接.then() ：

function modal_close() {
    return $('.custom_block_page').add($(this).parent()).fadeOut().promise().then(function() {
        $(this).remove();
    });
};

在调用.trigger() ， .trigger()返回jQuery，但是您现在需要使用返回的.triggerHandler() ，因此请使用.triggerHandler() 。

MatchGame.closeWin = function() {
    $('.custom_modal_close').triggerHandler('click').then(function() {
        MatchGame.playGame();
    });
};

编辑：

来自add_block_page()和add_popup_box()可以安全地滚动到show_modal_box()以实现一个更大的功能。

这样，您将从能够从关闭按钮的单击处理程序访问变量$block_page ， $pop_up ， $close和$inner $pop_up 。

function show_modal_box() {
    var $block_page = $('<div class="custom_block_page"></div>').appendTo('body'); // dark background
    var $pop_up = $('<div class="custom_modal_box"></div>').appendTo($block_page);
    var $close = $('<a href="#" class="custom_modal_close"></a>').appendTo($pop_up);
    var $inner = $('<div class="custom_inner_modal_box">loading...</div>').appendTo($pop_up);
    if(options.name != '') {
        $pop_up.attr('id', options.name);
    }

    // Add the content - if url, load the page otherwise use the text
    if (options.url != '') {
        $inner.load(options.url);
    } else {
        var innerHTML = '';
        if(options.title[0] === "<") { // assume formatting
            innerHTML += options.title;
        } else {
            innerHTML += '<h2>' + options.title + '</h2>';
        }
        if(options.description[0] === "<") {
            innerHTML += options.description;
        } else {
            innerHTML += '<p>' + options.description + '</p>';
        }
        $inner.html(innerHTML);
    }

    $close.click(function() {
        // for example
        return $pop_up.fadeOut().promise().then(function() {
            $block_page.remove();
        });
    });
    $(window).off('resize.popup').on('resize.popup', add_styles).trigger('resize.popup'); // prevent accumulation of resize handlers

    // checkNeedScroll();
    $pop_up.fadeIn();
}

编辑2

我想我有！

在custom_modal_box插件中，以下代码导致将点击处理程序附加this ：

    return this.click(function(e) {
        show_modal_box();
    });

如果该插件在任何特定元素上仅被调用一次，那很好，但是在游戏的代码中，每次游戏完成时，它在同一个元素$('.win')上被调用。

为了防止$('.win')上单击处理程序的积累，请将代码更改为：

    return this.off('click.popup').on('click.popup', function(e) {
        show_modal_box();
    });