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

Остановить движение клика вниз по дереву DOM

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

Answer 2

@epascarello ответ правильный. Некоторые пояснения о том, почему это происходит: перед закрытием всплывающее окно проверяет, находится ли выбранный элемент внутри всплывающего окна. remove() это - это снаружи - так что всплывающее окно закрывается.

Изменить: забыл упомянуть, что вы также можете добавить класс CSS mfp-prevent-close к этим элементам списка, чтобы предотвратить это.

Answer 3

ЗДЕСЬ: ДЕМО

связывание один раз:

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

и предотвращение дефолтов....

Повеселись