基本彈出窗口無法正常工作

Question

我嘗試創建的彈出窗口有一個小問題。

當單擊一個按鈕（具有特定ID的任何按鈕）時，它應該打開（這似乎起作用），但是當我打開它時，我想要它，因此，如果您單擊除主彈出窗口之外的任何內容，它都應該關閉。

但是，當我單擊寬度為100％，高度為100％的.overeverythingCover時，它似乎沒有關閉。

http://jsfiddle.net/mnW7U/

$('#activatePopOver, .overeverythingCover').click(function() {
        popUpOverEverything();
   });

---

function popUpOverEverything(data) {
    // if exists | remove it
    if ($('.overeverythingCover').length) {
        $('.overeverythingCover').empty();
        $('.overeverythingCover').removeClass();
        $('body').css('overflow', 'scroll');
        console.log("hehe");
    } else {
        $('body').append('<div class="overeverythingCover"</div>');
        $('.overeverythingCover').append('<div class="overEverything"</div>');
        $('body').css('overflow', 'hidden');
        $('.overEverything').html(data);
    };
}

謝謝！

Answer 1

您不能對尚不存在的元素使用“點擊”處理程序。 您可以使用.live：

$(function() {
    $('#activatePopOver, .overeverythingCover').live('click', function() {
        popUpOverEverything();
   });

    function popUpOverEverything(data) {
        if ($('.overeverythingCover').length > 0) {
            $('.overeverythingCover').remove();
            $('body').css('overflow', 'scroll');
        } else {
            $('body').append('<div class="overeverythingCover"</div>');
            $('.overeverythingCover').append('<div class="overEverything"</div>');
            $('body').css('overflow', 'hidden');
            $('.overEverything').html(data);

            // Just close when you click outside the popup
            $('.overEverything').click(function(event){
                event.stopPropagation();
            });
        };
    }
});

參見小提琴： http : //jsfiddle.net/mnW7U/3/

Answer 2

使用委托事件偵聽器，例如：

$(document).on("click", '#activatePopOver, .overeverythingCover', function() {
    popUpOverEverything();
});

就像提到的Wobbuffet一樣，問題在於綁定事件時頁面上沒有.overerverythingCover div。

注意：這僅適用於jQuery 1.7+

對於較舊的版本，您可以使用.delegate()

Answer 3

問題是您將click事件綁定到頁面上尚不存在的元素。

我用一個簡單易懂的示例更新了您的小提琴： http : //jsfiddle.net/mnW7U/2/

我創建了一個popDown()函數，該函數在單擊按鈕時與以下函數綁定：

 $('.overeverythingCover').click(function() {
      popDown();
 });

Answer 4

問題是這樣的：

$('body').append('<div class="overeverythingCover"</div>');

將click事件添加到該事件之后，將其追加。 嘗試將其添加到dom（html中的none-js），然后弄亂它的display屬性。