Question

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

为什么弹出窗口在成功关闭后重新出现？

Answer 1

在他的回答中提及@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");
});

Answer 2

问题是你没有在关闭点击时停止事件传播，并且因为close在触发弹出窗口的元素内，它会向下工作，同时触发弹出点击处理程序。在点击处理程序中调用http://api.jquery.com/event.stopImmediatePropagation/以进行关闭。

修改

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

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

第二次编辑

关闭内的这一行也存在问题：$(this).removeClass("selected");

对此进行读取和jQuery这一点，因为在回调中，这引用了被点击的元素（.close），而不是您之前将“已选择”类添加到的元素。

为什么这个JQuery弹出窗口重新出现？

2 个答案: