Drupal and event on bootstrap modal I have a following problem. 

I have a bootstrap modal with a form which I submit using jQuery. Upon sussesful Ajax I hide the form in the modal and append a message. 

Now, when I close the modal and open it again I would like to have an empty form. Instead obviously I see the message. So I thought that I will use the bootstrap 'hidden.bs.modal' event to trigger the reoval of the message, showing the form and resetting it. The problem is that the event listener is never attached to the modal:

  Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {
  //code starts
  $('#feedback-form').submit(function(e) {

    $('#feedback-form').hide().parent().append('&lt;div id="loader" class="well well-lg" style="text-align:center"&gt;&lt;h3 class="alert alert-info"&gt;Please wait ...&lt;/h3&gt;&lt;/div&gt;');
    $.post("email_us.php",form.serialize(), function(data){
        $('#loader').replaceWith('&lt;div id="loader1" class="well well-lg" style="text-align:center"&gt;&lt;h3 class="alert alert-success"&gt;'+data+'&lt;/h3&gt;&lt;/div&gt;');
        $('#feedbackModal').on('hidden.bs.modal', function (e) {
                        $('#loader1').remove();
                        $('#feedback-form').show().trigger('reset');
                    });
        });
    e.preventDefault();
    })
  }
}


I do not see any error in the console it simply seems that the 'hidden.bs.modal' event listener is not attached to the modal.

Interestingly. If I execute this part of th code in console:

$('#feedbackModal').on('hidden.bs.modal', function (e) {
                    $('#loader1').remove();
                    $('#feedback-form').show().trigger('reset');
});


and then

$('#feedbackModal').trigger('hidden.bs.modal')


the modal and form behave as intended.

Any has an idea how to solve this problem?
This isn't exactly a Drupal question :)

Why not simply clear the form data as soon as you get to the AJAX success point?

Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {
    //code starts
    $('#feedback-form').submit(function(e) {
      $('#feedback-form').hide().parent().append('&lt;div id="loader" class="well well-lg" style="text-align:center"&gt;&lt;h3 class="alert alert-info"&gt;Please wait ...&lt;/h3&gt;&lt;/div&gt;');
      $.post("email_us.php",form.serialize(), function(data){
        $('#loader').replaceWith('&lt;div id="loader1" class="well well-lg" style="text-align:center"&gt;&lt;h3 class="alert alert-success"&gt;'+data+'&lt;/h3&gt;&lt;/div&gt;');
        $('#feedback-form').trigger('reset');
      });
      e.preventDefault();
  })
}


As far as I can see, if you modify the code like this, it will:


hide the form in preparation to post (no change)
post, and wait for success (no change)
show the success message (no change)
clear the form immediately (modified)


Does this solve the problem, or have I misinterpreted what you need in a big way?



To answer the specific question, it's not clear to me what the problem might be, but I'm suspicious that it's caused by the on event handler being attached inside the $post function's success function. Maybe try moving it outside as shown below:

Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {
    //code starts
    $('#feedbackModal').on('hidden.bs.modal', function (e) {
      $('#loader1').remove();
      $('#feedback-form').show().trigger('reset');
    });
    $('#feedback-form').submit(function(e) {
      $('#feedback-form').hide().parent().append('&lt;div id="loader" class="well well-lg" style="text-align:center"&gt;&lt;h3 class="alert alert-info"&gt;Please wait ...&lt;/h3&gt;&lt;/div&gt;');
      $.post("email_us.php",form.serialize(), function(data){
        $('#loader').replaceWith('&lt;div id="loader1" class="well well-lg" style="text-align:center"&gt;&lt;h3 class="alert alert-success"&gt;'+data+'&lt;/h3&gt;&lt;/div&gt;');
      });
      e.preventDefault();
    })
  }
}