1

リスト項目を動的に追加するボタンがある壮大なポップアップがあります。すべてのリスト項目には、リスト項目を削除するボタンがあります。ただし、リスト項目が削除されると、ポップアップも閉じます。ポップアップを再度開くと、リスト項目が消えています。これはバグですか、それとも何か間違っていますか? 助けていただければ幸いです。

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()ます。

mfp-prevent-close編集:これを防ぐために、これらのリスト要素にCSS クラスを追加することもできることを忘れていました。

于 2013-05-17T15:16:00.850 に答える