Bootstrap 모달 상자 제출 버그에 대한 솔루션

이 글에서는 주로 Bootstrap 모달 상자가 백그라운드에서 여러 번 표시되고 여러 번 제출될 때의 BUG에 대한 해결 방법을 소개합니다. 관심 있는 친구는 이를 참조할 수 있습니다.

Bootstrap Modal

Bootstrap의 모달 상자 Bootstrap의 프런트 엔드를 사용하는 사람이라면 누구나 이 상자에 노출되었을 것입니다.

본 글은 오늘 사용 중에 발생한 BUG를 기록하여, 향후 동일한 문제가 발생하는 다른 파트너를 검토하고 도움을 드릴 수 있도록 작성되었습니다.

BUG 시나리오

사용 시나리오

는 모달 상자 표시를 트리거하고 해당 정보를 채운 다음 ajax가 양식 정보를 백그라운드에 제출합니다.

Simplify

아래 버튼을 한 번 클릭하면 모달 상자가 나타납니다. 제출을 클릭하면 바로 경고("제출")가 발생합니다. 한 번 클릭하면 정상적으로 느껴지지만 모달 상자를 여러 번 클릭하면 다시 제출을 클릭하면 경고가 여러 번 나타나는 것을 알 수 있습니다.

Jian Shu가 효과를 표시할 수 없습니다. 다음

코드를 참조하세요.

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

 $(&#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("提交");
  });
 });
 
});

문제 수정

위 js 코드를 사용하면 버튼을 클릭할 때마다 해당 이벤트가 제출 버튼에 추가됩니다. 다음과 같이 수정하세요.

$(function() {

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

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

layui의 값 전달에 대한 질문

JavaScript를 사용하여 복권 시스템을 구현하는 방법

자세한 답변 vue의 변경 사항이 구성 요소에 어떤 영향을 미치나요?

위 내용은 Bootstrap 모달 상자 제출 버그에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!