Solution to Bootstrap modal box submission bug

This article mainly introduces the solution to multiple BUG submissions in the background when the Bootstrap modal box displays multiple times. It has certain reference value. Interested friends can refer to

Module Modal box

Bootstrap Modal

You should have been exposed to Bootstrap’s modal box 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 modal box, fill in the corresponding information, and then submit the form information via ajax Go backstage.

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.

Jianshu cannot display the effect. You can refer to the

code 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 id="Modal-nbsp-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() {

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

Problem repair

The above js code will be displayed every time the button is clicked. Add corresponding events for the submit button. Just modify it as follows:

$(function() {

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Issues about value-passing in layui

How to implement a lottery system using JavaScript

Detailed answer: What impact do changes in vue have on components?

The above is the detailed content of Solution to Bootstrap modal box submission bug. For more information, please follow other related articles on the PHP Chinese website!