Question

我想点击td.active动态添加div。我希望在有人点击关闭按钮或点击其他td.active

时删除动态添加的div

现在我的代码只需在单击关闭按钮时附加另一个div。任何人都可以帮我解决问题。

$(function() {
    $('td.active').click(function(event){
        $(this).append('<div class="planner-modal"><div class="planner-modal-header"><button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><h5 class="text-center">modal heading</h5></div><div class="planner-modal-body">modal body</div><div class="caret-container"><div class="top-caret"></div><div class="bottom-caret"></div></div></div>');
    });
    $('.planner-modal-header.close').click(function(e){
        $(this).closest('planner-modal').remove();
    });
});

Answer 1

我已经通过了jsfiddle并修复了它。你试图在动态添加的内容上调用click事件，我们可以在方法上使用jQuery。我正在分享jsfiddle链接。

  $(document).on("click",'.close',function(e){

      $('.planner-modal').remove()
    });

click here to see the working jsfiddle example

感谢

Answer 2

对动态创建的元素使用事件委托

  $('td.active').on("click", ".planner-modal-header .close", function (e) {
    e.stopPropagation(); 
    $(this).closest('.planner-modal').remove();
});

DEMO

使用e.stopPropagation();停止bubbling event

删除父项上动态添加的div会导致它再次追加

2 个答案:

DEMO