如何删除通过 jQuery 插入的引导模式？

How to remove a bootstrap modal that's been inserted via jQuery?

提问by davidpauljunior

I decided I wanted to have a script that I could use if I needed to insert custom Bootstrap modals. I didn't want to have the empty static Bootstrap modal HTML sat in the bottom of every page if it wouldn't always be utilized.

我决定我想要一个脚本，如果我需要插入自定义 Bootstrap 模态，我可以使用它。如果不总是使用空的静态 Bootstrap 模态 HTML，我不希望它位于每个页面的底部。

So, this may be the wrong way of going about it, but this was my attempt. I create a variable which is the modal 'shell' html. Then, when I click a device item, this is appended to the body. I have some content then cloned and appended to header and body of the modal. All working fine. But I can't remove the modal once it's closed. This is something to do with the fact that I insert the HTML via JS, as the remove works fine if the Modal shell HTML exists statically in my HTML page.

所以，这可能是错误的处理方式，但这是我的尝试。我创建了一个变量，它是模态“shell”html。然后，当我单击一个设备项时，它会附加到正文中。我有一些内容，然后克隆并附加到模态的标题和正文。一切正常。但是一旦关闭，我就无法删除模态。这与我通过 JS 插入 HTML 的事实有关，因为如果模态 shell HTML 静态存在于我的 HTML 页面中，则删除工作正常。

HTML:

HTML：

<ul>
    <li class="span4 device">
        <div class="inner">
            <h3>Device 4</h3>
            <div class="device-product">
                <img class="device-image" src="img/placeholder-holding-image.png" alt="Holding Image" />
                <a href="#" class="hide">Troubleshoot this item</a>
                <a href="#" class="hide">How to use this product</a>
            </div>
            <div class="device-details">
                <div class="control-group">
                    <label class="control-label">Device Type:</label>
                    <span class="field">Really cool device</span>
                </div>
                <!-- Small amount of hidden additional information -->
                <div class="control-group hide">
                    <label class="control-label">Device ID:</label>
                    <span class="field">123456</span>
                </div>
            </div>
        </div>
    </li>
</ul>

jQuery:

jQuery：

var customModal = $(
    '<div class="custom-modal modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"> \ 
        <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div> \
        <div class="modal-body"></div> \
        <div class="modal-footer"><button class="btn" data-dismiss="modal">Close</button></div> \
    </div>'
);

$('.device').click(function(){
    $('body').append(customModal);
    $(this).find($('h3')).clone().appendTo('.custom-modal .modal-header');
    $(this).find('.device-product, .device-details').clone().appendTo('.custom-modal .modal-body');
    $('.custom-modal.hide').show();
    $('.custom-modal').modal();
});

 $('.custom-modal').on('hidden', function(){
    $(this).remove();
});

So really it's just the remove() I'm struggling with. But also, any comments on whether I'm going about this in a wrong / inefficient way are always helpful for learning!

所以真的只是我正在努力解决的 remove() 。而且，任何关于我是否以错误/低效的方式进行的评论总是有助于学习！

回答by thefrontender

You're attempting to bind the event handler for the hiddenevent before the .custom-modaldiv is added to the DOM, so the event handler is never bound to anything.

您试图hidden在将.custom-modaldiv 添加到 DOM之前绑定事件的事件处理程序，因此事件处理程序永远不会绑定到任何内容。

You can do this two ways.

你可以通过两种方式做到这一点。

1. Delegate the hiddenevent handler so that the document is always listening for hiddenevents originating from any element with a class of custom-modal:

   $(document).on('hidden', '.custom-modal', function () {
       $(this).remove();
   });
   

2. Bind the event handler after you've added the modal div to the DOM:

   $('.device').click(function(){
       // Push the modal markup into the DOM
       $('body').append(customModal);
   
       // Now that it's in the DOM we can find it and bind an event handler
       $('.custom-modal').on('hidden', function () {
           $(this).remove();
       });
   
       // Continue with other init tasks
       $(this).find('h3').clone().appendTo('.custom-modal .modal-header');
       $(this).find('.device-product, .device-details').clone().appendTo('.custom-modal .modal-body');
       $('.custom-modal.hide').show();
       $('.custom-modal').modal();
   });
   

1. 委托hidden事件处理程序，以便文档始终侦听hidden源自具有自定义模式类的任何元素的事件：

   $(document).on('hidden', '.custom-modal', function () {
       $(this).remove();
   });
   

2. 在将模态 div 添加到 DOM 后绑定事件处理程序：

   $('.device').click(function(){
       // Push the modal markup into the DOM
       $('body').append(customModal);
   
       // Now that it's in the DOM we can find it and bind an event handler
       $('.custom-modal').on('hidden', function () {
           $(this).remove();
       });
   
       // Continue with other init tasks
       $(this).find('h3').clone().appendTo('.custom-modal .modal-header');
       $(this).find('.device-product, .device-details').clone().appendTo('.custom-modal .modal-body');
       $('.custom-modal.hide').show();
       $('.custom-modal').modal();
   });
   

Option 1 is preferable, especially if there's a chance that multiple modals will be opened.

选项 1 更可取，尤其是在有可能打开多个模式的情况下。