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添加到这些列表元素中以防止这种情况发生。

Answer 2

停止点击沿DOM树向下移动

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

Answer 3

这里：DEMO

绑定一次：

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

并防止默认....

玩得开心

删除列表项时，Magnific Popup关闭

3 个答案: