Bootstrap modal box pops up multiple times Submit BUG

This time I will bring you the Bootstrap modal box pops up multiple times to submit a BUG. What are the precautions for submitting a BUG when the Bootstrap modal box pops up multiple times? The following is a practical case, let’s take a look.

Modal box

Bootstrap Modal

You should have been exposed to Bootstrap's modal box before using Bootstrap's front-end.

This article records the BUG encountered during today's use so that we can review and help other partners who encounter the same problem in the future.

BUG Scenario

Usage Scenario

Trigger the display of the modal box, fill in the corresponding information, and then submit the form information to the background via ajax.

Simplify

Click the button below once to pop up the modal box. Clicking submit will alert("submit") directly. Clicking it once will feel normal, but if you click the modal box several times, you will find that when you click Submit again, the alert will appear multiple times.

【Related video recommendation: Bootstrap tutorial】

The short book cannot show the effect, please refer to

The code is as follows:

<button class="btn btn-info" id="modal-click-error">点击弹出模态框</button>
<p class="modal" tabindex="-1" role="dialog" id="myModal">
 <p class="modal-dialog" role="document">
 <p class="modal-content">
  <p class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  <h4 class="modal-title">Modal title</h4>
  </p>
  <p class="modal-body">
  <p>One fine body…</p>
  </p>
  <p class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  <button type="button" class="btn btn-primary">提交</button>
  </p>
 </p><!-- /.modal-content -->
 </p><!-- /.modal-dialog -->
</p><!-- /.modal -->
$(function() {
 $('#modal-click-error').on('click', function() {
  $('#myModal').modal('show');
  
  $("#myModal .btn-primary").on('click', function() {
   alert("提交");
  });
 });
 
});

Problem fix

The above js code will add the corresponding event to the submit button every time the button is clicked. Modify it as follows:

$(function() {
 $('#modal-click-error').on('click', function() {
  $('#myModal').modal('show');
 });
 
 $("#myModal .btn-primary").on('click', function() {
  alert("提交");
 });
 
});

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

AngularJS implements price calculation function

vue-cliHow to configure lib-flexible rem mobile terminal automatically adapt

The above is the detailed content of Bootstrap modal box pops up multiple times Submit BUG. For more information, please follow other related articles on the PHP Chinese website!