Bootstrap モーダルボックス送信バグの解決策-jsチュートリアル-php.cn

Bootstrap モーダルボックス送信バグの解決策

亚连

リリース： 2018-06-15 14:33:20

オリジナル

1552 人が閲覧しました

この記事は、Bootstrap モーダルボックスがバックグラウンドで複数回表示され、複数回送信される場合のバグの解決策を主に紹介します。興味のある友人はそれを参照してください

モーダルボックス

。

Bootstrap のモーダルボックス。Bootstrap のフロントエンドを使用する人なら誰でも、これに触れたことがあるはずです。

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

バグシナリオ

使用シナリオ

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

簡素化

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

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

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

ログイン後にコピー

上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。

layui での値の受け渡しに関する質問

JavaScript を使用して宝くじシステムを実装する方法

詳細な回答 vue の変更はコンポーネントにどのような影響を与えますか?

以上がBootstrap モーダルボックス送信バグの解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。