爲什麼這個JQuery彈出窗口重新出現？

我有一個JQuery彈出式功能，當用戶點擊一個鏈接時顯示一些文本。他們點擊「關閉」關閉彈出窗口。非常直截了當。爲什麼這個JQuery彈出窗口重新出現？

問題是彈出窗口在關閉後立即重新出現。

這裏的問題位：

JAVACRIPT 
$.fn.myPopup = function(popupText) 
{ 
    var popupHtml = '<div class="messagepop pop">' + popupText + '<p align="right"><a class="close" href="#">Close</a></div>'; 
    this.each(function() 
    { 
     $(this).click(function(){ 
      $(this).addClass("selected").parent().append(popupHtml); 
      $(".pop").slideFadeToggle() 
     }); 
     return false; 
    }); 

    $(".close").on('click', function() 
    { 
     alert('in close function - about to do slideFadeToggle on: ' + popupText); 
     $(".pop").slideFadeToggle(); 
     alert('just did slideFadeToggle, about to removeClass on: ' + popupText);   
     $(this).removeClass("selected"); 
     alert('just did removeClass on: ' + popupText); 
    }); 

    return this; 
}; 
$("#word1234").myPopup("Lorem Ipsum"); 
$("#wordABCD").myPopup("Hello World"); 


HTML 
<a href="#" id="word1234">Supercalifragilisticexpialidocious</a> <br> 
<a href="#" id="wordABCD">Foo</a> <br>

這裏有一個小提琴，所以你可以在行動中看到它：http://jsfiddle.net/N4QCZ/3/

爲什麼又出現彈出它成功地關閉後？

來源

2013-02-12 a coder

我沒有看到任何彈出，而不是一個js錯誤「slideFadeToggle不是一個函數」。 – KBN 2013-02-12 17:42:37

我不得不改變小提琴使用jQuery 1.9.1而不是1.4RC4來讓小提琴起作用。 – Barmar 2013-02-12 17:45:10

問題在於，在彈出窗口被添加到DOM之前，您正在綁定'$（「。close」）。on（'click'，...）'，因此沒有任何可綁定的東西。你需要委託而不是綁定。 – Barmar 2013-02-12 17:46:41

問題在於，您並未停止關閉點擊上的事件傳播，並且由於關閉位於觸發彈出窗口的元素內，因此它會下移，同時觸發彈出式點擊處理程序。請在關閉的點擊處理程序中調用http://api.jquery.com/event.stopImmediatePropagation/。

編輯

其實你把它添加到父，所以應該不會引發第二次點擊，但我想反正調用停止傳播。另一個問題可能是關閉處理程序和彈出式處理程序中的這條線：$(".pop").slideFadeToggle();

這將導致您生成的所有彈出窗口滑動窗口，這意味着一旦您創建了多個窗口（您將這樣做）然後在每次通話中隱藏的將顯示，並顯示的將隱藏。另外，slideFadeToggle是一個自定義插件？確定你不是指滑動窗口（）？

第二個編輯

內接近這條線也是有問題的：$(this).removeClass("selected");

電文讀出這個和jQuery這一點，因爲在回調中該referes到點擊的元素（.close）而不是元素你在前面添加了'selected'類。

來源

2013-02-12 17:54:31 runspired

第一次點擊發生後，內存中的東西正在被留在內存中。當第二次點擊發生時，如果它是不同的項目，則通過一個函數調用觸發兩個彈出窗口。 http://jsfiddle.net/N4QCZ/9/ – 2013-02-12 21:15:20

問題是你仍然有我的第一個編輯 – runspired 2013-02-12 21:34:10

討論的問題，我通過例子學得最好 - 瀏覽你的文本並去找Jai發佈的代碼。現在我明白你在說什麼了。現在就開始工作吧。 – 2013-02-12 21:37:31

在他的回答中提到@runspired：http://jsfiddle.net/N4QCZ/5/

$(document).on('click', ".close", function(e) { //<-----event delegation needed here 
    e.stopImmediatePropagation(); //<-----you need this 
    $(".pop").slideFadeToggle(); 
    $(this).removeClass("selected"); 
});

來源

2013-02-12 18:02:55 Jai

爲什麼這個JQuery彈出窗口重新出現？

回答

相關問題