如何通过jQuery移除已插入的Bootstrap模态框？

Question

如何通过jQuery移除已插入的Bootstrap模态框？

9

我决定编写一个脚本，以便在需要插入自定义Bootstrap模态框时使用。如果不总是使用它，我不想在每个页面底部放置空的静态Bootstrap模态框HTML。

因此，这可能不是正确的方法，但这是我的尝试。我创建了一个变量，它是模态框的“外壳”HTML。然后，当我单击设备项时，它将附加到主体中。我还克隆并附加了一些内容到模态框的标题和正文。一切都正常工作。但是，一旦关闭模态框，我就无法将其删除。这与我通过JS插入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:

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();
});

实际上，我遇到的问题只是remove()。但是，关于我是否以错误/低效的方式进行操作的任何评论都有助于学习！

- davidpauljunior

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thefrontender · Accepted Answer

在将 .custom-modal div 加入 DOM 之前，您正在尝试绑定 hidden 事件处理程序，因此事件处理程序永远不会绑定到任何内容。

有两种方法可以解决这个问题。

委托 hidden 事件处理程序，以便文档始终监听来自任何具有自定义模态框类的元素的 hidden 事件:
```
$(document).on('hidden', '.custom-modal', function () {
    $(this).remove();
});
```
将事件处理程序绑定到模态框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();
});

首选选项1，特别是如果有可能打开多个模态框。