0

我有一个 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/

为什么弹出窗口成功关闭后又出现了？

4

2 回答 2

2

正如@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-12T18:02:55.707 回答
1

问题是您没有在关闭单击时停止事件传播，并且由于关闭位于触发弹出窗口的元素内，因此它会向下工作，从而触发弹出单击处理程序。在单击处理程序中调用http://api.jquery.com/event.stopImmediatePropagation/以关闭。

编辑

实际上你将它附加到父级，所以它不应该触发第二次点击，但我还是会调用停止传播。另一个问题可能是关闭处理程序和弹出处理程序中的这一行：$(".pop").slideFadeToggle();

这将导致您生成的所有弹出窗口都滑动切换，这意味着一旦您创建了多个（您所做的），那么在每次调用时，隐藏的将显示，而显示的将隐藏。另外，slideFadeToggle 是自定义插件吗？确定你不是说 slideToggle() 吗？

第二次编辑

close 内的这条线也有问题：$(this).removeClass("selected");

阅读 this 和 jQuery this，因为在回调中 this 指的是被点击的元素（.close），而不是你之前添加类“selected”的元素。

于 2013-02-12T17:54:31.593 回答