ブートストラップ モーダル ボックスが複数回ポップアップする バグを送信する

今回は、BUG を送信するために複数回ポップアップする Bootstrap モーダル ボックスについて説明します。Bootstrap モーダル ボックスが複数回ポップアップする場合に、BUG を送信する際の注意点について説明します。実際のケースを見てみましょう。

モーダルボックス

ブートストラップモーダル

Bootstrap のフロントエンドを使用する前に、Bootstrap のモーダル ボックスを知っておく必要があります。

この記事では、今後同じ問題が発生する他のパートナーを確認して支援できるように、今日の使用中に発生したバグを記録します。

バグシナリオ

使用シナリオ

モーダル ボックスの表示をトリガーし、対応する情報を入力してから、ajax 経由でフォーム情報をバックグラウンドに送信します。

簡素化

下のボタンを 1 回クリックすると、モーダル ボックスが表示されます。送信をクリックすると、alert("submit") が直接表示されます。 1 回クリックすると正常に感じられますが、モーダル ボックスを数回クリックすると、もう一度 [送信] をクリックしたときにアラートが複数回表示されることがわかります。

【おすすめ関連動画:Bootstrapチュートリアル】

単なる本では効果は表せないので、ぜひ参考にしてください

コードは次のとおりです:

<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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

AngularJS が価格計算機能を実装

vue-cli lib-flexible+rem モバイル適応の設定方法

以上がブートストラップ モーダル ボックスが複数回ポップアップする バグを送信するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。