Dynamisch gebundenes Ereignis wird nicht ausgelöst, wenn Formular über jQuery gesendet wird

Question

Ich habe den folgenden Code, um die Daten von allen Formularen auf einer Seite zu erfassen. Die Ereignisse sind dynamisch gebunden.

formCapture: function() { 
     console.log("formCapture"); 
     var formsCollection = document.getElementsByTagName("form"); 
     console.log(formsCollection); 
     for (var i = 0; i < formsCollection.length; i++) { 
     this.bindEvent(formsCollection[i]); 
     } 
    }, 

    bindEvent: function (formElement) { 
     console.log("bindEvent"); 
     var $this = this; 
     if (formElement.addEventListener) { 
     formElement.addEventListener('submit', function (e) { 
      $this.collectData(e, $this) 
     }, false); 
     } 
    }, 

    collectData: function (e, that) { 
     // save form data here 
    } 

Es funktioniert gut, wenn das Formular durch Klicken auf die Schaltfläche Absenden (Standardverhalten) gesendet wird.

Aber wenn ich so etwas wie dies auf dem Formular binden:

jQuery("#form-submit").on("click",function(e){ 
    e.preventDefault(); 
    jQuery("#test-form").submit(); 
    console.log("form has been submitted"); 
    window.location = "https://example.com"; 
    }) 

Wo #test-form der Formularname und #form-submit ist ist die ID des Submit-Button die collectData Funktion, die gebunden ist, es nicht feuern wird.

Gibt es eine Möglichkeit, die Daten aus den Formularen abzurufen, ohne den Datenfluss zu unterbrechen?

Answer 1

Sie sollten nicht nur die Submit-Funktion verwenden, sondern das Submit wie: jQuery ("# ​​test-form") auslösen. Trigger ('submit');