Bootstrap Modal 不会关闭，之前使用 JQuery 附加到 Body答案

【问题标题】：Bootstrap Modal won't close, previously appended to Body using JQueryBootstrap Modal 不会关闭，之前使用 JQuery 附加到 Body
【发布时间】：2014-07-28 03:08:05
【问题描述】：

所以我费尽心思让模式附加到正文和文本框工作，然后我在 AJAX 成功事件上关闭它，但我尝试的任何方法似乎都不起作用。

 var id;

var refundAmount = '';

var token = $("meta[name='csrf-token']").attr('content');

$('[data-toggle="modal"]').on('click', function(e) {

    var checkeventcount = 1;
    var prevTarget;

    // Find the id from the modals href attribute

    id = $(this).attr('href').replace(/[^0-9.]/g, "");

    $('#new_refund_modal' + id).on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {
            prevTarget = e.target;
            checkeventcount++;
            e.preventDefault();
            $(e.target).appendTo('body').modal('show');

            $(document.body).delegate('#new_refund_input' + id, 'change keyup paste mouseup', function() {
                if ($(this).val() != refundAmount) {
                    refundAmount = $(this).val();
                }
            });
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
            checkeventcount--;
        }
    });
});

$('.refund-submit-btn').click(function (e) {
    e.preventDefault();

    $.ajax({
        url: '<%= payment_plan_refund_url %>',
        type: 'post',
        data: { authenticity_token: token, id: id, payment: { refund_amount: refundAmount }},
        success: function (data, status) {
            $('#new_refund_modal' + id).modal('hide');
        }
    });

});

这是我尝试过的不同修复的列表，模式中的关闭按钮仍然有效，所以我一直试图在 AJAX Success 上触发它，但该修复似乎也不起作用

1) $('#new_refund_modal' + id).modal('hide');

2) $('#new_refund_modal' + id).data('modal', null);

3) $('#new_refund_modal' + id).remove();
   $('.modal-backdrop').remove();
   $('body').removeClass('modal-open');

4) $('#closeModal' + id).click();

【问题讨论】：

您是否考虑到从 DOM 中删除/重新添加元素时所有事件处理程序都消失了？您必须在树中较高的元素中注册事件
你能给我一个代码sn-p如何做到这一点吗？再次使用委托（）？

标签： javascript jquery ajax twitter-bootstrap bootstrap-modal

【解决方案1】：

当您删除/重新添加元素时，所有先前注册的事件处理程序都将消失。同样，新创建的 DOM 元素不会自动注册处理程序

例如假设这是你的 DOM 树：

body
 +-- modal1
      +-- close-button

如果您在关闭按钮上注册处理程序，当 modal1 从 DOM 中删除/重新添加时，处理程序就会消失。这也适用于在在 modal1 创建并附加到 DOM 之前添加处理程序

您可以在删除/重新添加 DOM 元素时重新注册处理程序，或者在祖先元素上注册处理程序（因为在树下触发的元素将向上传播）。

例如，而不是

$('#modal1 .close-button').click(function() { .. })

用途：

$('body').on('click', '#modal1 .close-button', function() { .. });

【讨论】：