如何删除通过jQuery插入的引导程序模式? [英] How to remove a bootstrap modal that's been inserted via jQuery?

问题描述

我决定，如果需要插入自定义Bootstrap模态，我想拥有一个可以使用的脚本.如果不想总是使用空的静态Bootstrap模态HTML，那么我不想在每页的底部都放它.

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.

所以，这可能是错误的解决方法，但这是我的尝试. 我创建了一个模态"shell" html变量.然后，当我单击设备项时，它会附加到主体上.然后，我复制了一些内容并将其附加到模态的标题和正文中.一切正常.但是，一旦模式关闭，我将无法删除它.这与我通过JS插入HTML的事实有关，因为如果Modal shell HTML静态存在于我的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.

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().而且，任何有关我是否会以错误/低效的方式进行操作的评论始终对学习有帮助！

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!

推荐答案

您正在尝试将.custom-modal div添加到DOM之前为hidden事件绑定事件处理程序，因此永远不要使用事件处理程序.绑定到任何东西.

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

您可以通过两种方式做到这一点.

You can do this two ways.

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

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

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

将模式div添加到DOM后，绑定事件处理程序:

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是可取的，特别是如果有可能会打开多个模态的话.

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

这篇关于如何删除通过jQuery插入的引导程序模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！