1

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

3 回答 3

2

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

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

于 2013-05-17T15:16:00.850 回答
1

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

$("#dialog #listitems .listitem_delete").off("click").click( function (e) {  
    e.stopPropagation();        
    $(this).parent("li").remove();
});
于 2013-05-17T15:11:31.940 回答
1

这里：演示

绑定一次：

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

并防止违约....

玩得开心

于 2013-05-17T15:29:09.773 回答