删除列表项时关闭 Magnific Popup答案

【问题标题】：Magnific Popup closes when removing list item删除列表项时关闭 Magnific Popup
【发布时间】：2013-05-17 14:59:00
【问题描述】：

我有一个 Magnific Popup，其中有一个动态添加列表项的按钮。在每个列表项中都有一个用于删除列表项的按钮。但是，当列表项被删除时，它也会关闭弹出窗口。当我再次打开弹出窗口时，列表项消失了。这是一个错误还是我做错了什么？非常感谢您的帮助，谢谢！

codepen 示例：http://codepen.io/anon/pen/sxfen

HTML：

<a href="#dialog" class="open-popup-link">Show popup</a>

<!-- Popup -->
<div id="dialog" class="white-popup mfp-hide">
<span><a href="javascript:void(0);" id="listitem_add" class="required">Add list item</a></span>
<section id="listitems"><ul></ul></section>
</div>

Javascript：

$('.open-popup-link').magnificPopup({
    type:'inline'
});

$("#listitem_add").click(function () {
    $("#dialog #listitems ul").append("<li><a href='javascript:void(0);' class='listitem_delete'>Delete this list item</a></li>");

    $("#dialog #listitems .listitem_delete").off("click").click(function () {
        $(this).parent("li").remove();
    });
});

【问题讨论】：

我对为什么会发生这种情况没有很好的答案，但我能够通过首先隐藏元素然后删除它来解决问题。这是工作示例：codepen.io/anon/pen/jhFgm。这可能是由于事件的传播。您可以在此处了解有关事件传播的更多信息：javascripter.net/faq/eventbubbling.htm

标签： javascript jquery html magnific-popup

【解决方案1】：

@epascarello 的答案是正确的。关于为什么会发生这种情况的一些说明：在关闭之前，弹出窗口会检查单击的元素是否在弹出窗口内，就像你 remove() 它一样 - 它在外面 - 所以弹出窗口关闭。

编辑：忘了提到您还可以将 CSS 类 mfp-prevent-close 添加到这些列表元素中以防止这种情况发生。

【讨论】：

感谢您的澄清和一个很棒的插件。

【解决方案2】：

阻止点击沿着 DOM 树向下移动

$("#dialog #listitems .listitem_delete").off("click").click( function (e) {  
    e.stopPropagation();        
    $(this).parent("li").remove();
});

【讨论】：

【解决方案3】：

这里：DEMO

绑定一次：

 .....find('.listitem_delete').one('click', function (event) {  
 $(this).parent('li').remove();
 event.stopPropagation(); 
 event.preventDefault();
 });

并防止默认值....

玩得开心

【讨论】：