为什么这个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>

javascript
$.fn.myPopup=函数（popupText）
{
var popupHtml=''+popupText+'
；
这个。每个（函数（）
{
$（此）。单击（函数（）{
$（this.addClass（“selected”）.parent（）.append（popupHtml）；
$（“.pop”）.slideFadeToggle（）
});
返回false；
});
$（“.close”）。在（'click'，function（）上
{
警报（'在关闭功能中-即将在：'+popupText上执行slideFadeToggle）；
$（“.pop”）.slideFadeToggle（）；
警报（'刚刚做了slideFadeToggle，即将在：'+popupText上删除类'）；
$（此）.removeClass（“选定”）；
警报（'刚刚在：'+popupText上删除了类'）；
});
归还这个；
};
$（“#word1234”）.myPopup（“Lorem Ipsum”）；
$（“#wordABCD”）.myPopup（“你好世界”）；
HTML

这是一把小提琴，你可以看到它在演奏：

---

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

问题在于，您没有在关闭单击时停止事件传播，而且由于关闭位于触发弹出窗口的元素内，因此它会向下运行，同时触发弹出窗口单击处理程序。在单击处理程序中调用以关闭

编辑

实际上，您将其附加到父级，因此它不应该触发第二次单击，但无论如何我都会调用停止传播。另一个问题可能是关闭处理程序和弹出处理程序中的这一行：

$（“.pop”）.slideFadeToggle（）

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

第二次编辑

close中的这一行也有问题：
$（This）.removeClass（“selected”）

请阅读此内容并jQuery此内容，因为在回调中，此内容引用的是已单击的元素（.close），而不是您先前将类“selected”添加到的元素。
问题在于，您没有在单击关闭时停止事件传播，并且由于关闭位于触发弹出窗口的元素内，因此它会向下运行，同时触发弹出式单击处理程序。在单击处理程序中调用以关闭

编辑

实际上，您将其附加到父级，因此它不应该触发第二次单击，但无论如何我都会调用停止传播。另一个问题可能是关闭处理程序和弹出处理程序中的这一行：
$（“.pop”）.slideFadeToggle（）

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

第二次编辑

close中的这一行也有问题：
$（This）.removeClass（“selected”）

请阅读此内容并jQuery此内容，因为在回调中，此内容引用的是已单击的元素（.close），而不是您先前将类“selected”添加到的元素。
正如他在回答中提到的
@runspired
：

$（文档）。在（'click'，“.close”）上，函数（e）{/如他在回答中提到的
@runspired
：

$（document）.on（'click'，“.close”，function（e）{//我没有看到任何弹出窗口，而是出现了一个js错误“slideFadeToggle不是一个函数”。我不得不将fiddle更改为使用jQuery 1.9.1而不是1.4RC4来让fiddle工作。问题是您正在绑定
$（.close”）。on（'click'，…）
在将弹出窗口添加到DOM之前，没有什么可绑定的。您需要委托而不是绑定。我没有看到任何弹出窗口，而是出现了js错误“slideFadeToggle不是函数”。我必须将该小提琴改为使用jQuery 1.9.1而不是1.4RC4才能让小提琴工作。问题是您正在绑定
$（.close”）。继续（‘点击’，…）
在将弹出窗口添加到DOM之前，没有什么可绑定的。您需要委托而不是绑定。在第一次单击之后，内存中会留下一些内容。当第二次单击发生时，如果是另一个项目，则会触发两个弹出窗口，只需一次函数调用。问题是，您仍然存在m中讨论的问题y first EditI我通过示例学习得最好-浏览了你的文本并阅读了Jai发布的代码。现在我明白你的意思了。现在开始处理。否定。两个弹出窗口都出现了。让我们看看第一次单击后内存中有什么东西。当第二次单击发生时，如果它是另一个项目，两个弹出窗口都会被触发，并显示on函数调用。问题是你仍然有我的第一版中讨论的问题。我通过示例学习得最好-浏览了你的文本并阅读了Jai发布的代码。现在我明白你的意思了。现在开始着手解决这个问题。否定。两个弹出窗口都出现了。让我们来看看
$(document).on('click', ".close", function(e) { //<-----event delegation needed here
    e.stopImmediatePropagation(); //<-----you need this
    $(".pop").slideFadeToggle();
    $(this).removeClass("selected");
});