Das modale Bootstrap-Feld wird mehrmals angezeigt. Fehler melden

Dieses Mal werde ich Ihnen zeigen, dass das modale Bootstrap-Feld mehrmals angezeigt wird, um einen Fehler einzureichen. Was sind die Vorsichtsmaßnahmen für das Einreichen eines Fehlers, wenn das modale Bootstrap-Feld mehrmals angezeigt wird? Schauen Sie mal rein.

Modalbox

Bootstrap Modal

Sie sollten mit der modalen Box von Bootstrap in Kontakt gekommen sein, bevor Sie das Frontend von Bootstrap verwenden.

In diesem Artikel wird der bei der heutigen Nutzung aufgetretene 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 die Anzeige des modalen Felds aus, geben Sie die entsprechenden Informationen ein und senden Sie dann die Formularinformationen über Ajax an den Hintergrund.

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.

【Ähnliche Videoempfehlungen: Bootstrap-Tutorial】

Das kurze Buch kann den Effekt nicht zeigen, siehe

Der Code lautet wie folgt:

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

Problembehebung

Der obige js-Code fügt jedes Mal, wenn auf die Schaltfläche geklickt wird, das entsprechende Ereignis zur Senden-Schaltfläche hinzu. Ändern Sie es einfach wie folgt:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

AngularJS implementiert die Preisberechnungsfunktion

Wie vue-cli das mobile lib-flexible+rem-Terminal konfiguriert Adaptiv

Das obige ist der detaillierte Inhalt vonDas modale Bootstrap-Feld wird mehrmals angezeigt. Fehler melden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!