Bootstrap 모달 상자가 여러 번 나타납니다. BUG 제출

이번에는 BUG를 제출하기 위해 여러 번 나타나는 Bootstrap 모달 상자를 가져왔습니다. Bootstrap 모달 상자가 여러 번 팝업되는 경우 BUG를 제출할 때 주의 사항은 무엇입니까? 실제 사례를 살펴보겠습니다.

모달 상자

부트스트랩 모달

Bootstrap의 프런트엔드를 사용하기 전에 Bootstrap의 모달 상자를 접했어야 합니다.

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

BUG 시나리오

사용 시나리오

모달 상자 표시를 트리거하고 해당 정보를 입력한 다음 Ajax를 통해 양식 정보를 백그라운드에 제출합니다.

단순화

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

【관련 영상 추천: 부트스트랩 튜토리얼】

간단한 책으로는 효과를 볼 수 없으니

를 참고해주세요 코드는 다음과 같습니다:

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

문제 해결

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

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

AngularJS는 가격 계산 기능을 구현합니다

vue-cli lib-flexible+rem 모바일 적응을 구성하는 방법

위 내용은 Bootstrap 모달 상자가 여러 번 나타납니다. BUG 제출의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!