为什么这个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弹出窗口重新出现？

回答

相关问题