javascript - 删除列表项时 Magnific Popup 关闭

Question

我有一个 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();
    });
});

Answer 1

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

编辑:忘记提及您还可以向这些列表元素添加 CSS 类 mfp-prevent-close 以防止出现这种情况。