Lösung für den Bootstrap-Modal-Box-Übermittlungsfehler-js-Tutorial-php.cn

Lösung für den Bootstrap-Modal-Box-Übermittlungsfehler

亚连

Freigeben： 2018-06-15 14:33:20

Original

1553 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Lösung für mehrere BUG-Einreichungen im Hintergrund vor, wenn die Bootstrap-Modalbox mehrmals angezeigt wird. Interessierte Freunde können sich auf das

Modul Modal Box

Bootstrap Modal

Die Modalbox von Bootstrap sollte mithilfe von Bootstrap dem Frontend zugänglich gemacht werden.

In diesem Artikel werden die bei der heutigen Nutzung aufgetretenen Fehler aufgezeichnet, damit wir andere Partner, die in Zukunft auf das gleiche Problem stoßen, überprüfen und ihnen helfen können.

BUG-Szenario

Nutzungsszenario

Lösen Sie das Anzeigemodalfeld aus, geben Sie die entsprechenden Informationen ein und senden Sie dann das Formularinformationen über Ajax Gehen Sie hinter die Kulissen.

Vereinfachen

Klicken Sie einmal auf die Schaltfläche unten, um das modale Feld aufzurufen. Wenn Sie auf „Senden“ klicken, wird direkt eine Warnung („Senden“) angezeigt. Wenn Sie einmal darauf klicken, fühlt es sich normal an. Wenn Sie jedoch mehrmals auf das modale Feld klicken, werden Sie feststellen, dass die Warnung mehrmals angezeigt wird, wenn Sie erneut auf „Senden“ klicken.

Das kurze Buch kann den Effekt nicht anzeigen. Sie können sich wie folgt auf den

Code beziehen:

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

Nach dem Login kopieren

Problembehebung

Der obige js-Code wird angezeigt Wird jedes Mal angezeigt, wenn auf die Schaltfläche geklickt wird. Fügen Sie entsprechende Ereignisse für die Schaltfläche „Senden“ hinzu. Ändern Sie es einfach wie folgt:

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

Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Probleme im Zusammenhang mit der Wertübergabe in Laui

So implementieren Sie ein Lotteriesystem mit JavaScript

Ausführliche Antwort: Welche Auswirkungen haben Änderungen in Vue auf Komponenten?

Das obige ist der detaillierte Inhalt vonLösung für den Bootstrap-Modal-Box-Übermittlungsfehler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!