CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstrapbootstrap-modal
flylib
flylib

Reputation: 1148

Bootstrap Modal won't close, previously appended to Body using JQuery

So I go to all this trouble to get the modal appended to the body and the text box working then I go to close it on the AJAX success event but nothing I try seems to work.

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

});

Here's a list of the different fixes I have tried, The close button in the modal still works so I have been trying to trigger that on the AJAX Success but that fix doesn't seem to work either

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

Upvotes: 0

Views: 661

Answers (1)

gerrytan
gerrytan

Reputation: 41133

All previously registered event handlers are gone when you removed/re-added the elements. Also newly created DOM element will not have the handlers automatically registered

For example assuming this is your DOM tree:

body
 +-- modal1
      +-- close-button

If you register the handler on close-button, when modal1 is removed/re-added from the DOM the handlers are gone. This also applies if the handlers are added before modal1 is created and attached to DOM

You can either re-register the handlers when you remove/re-add the DOM element, or register the handler on the ancester elements (because elements triggered down the tree will propagate upwards).

For example, instead of

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

Use:

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

Upvotes: 1

Related Questions