我的.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();
    });