jQueryを通じてフォームを送信するときに動的にバインドされたイベントがトリガーされない

Question

次のコードを使用して、ページ内のすべてのフォームからデータを取得します。イベントは動的にバインドされます。

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 
    } 

送信ボタン（デフォルト動作）をクリックしてフォームを送信すると問題なく動作します。

しかし、ときに私は、フォーム上でこのような何かをバインド：

#test-formは、フォーム名で、 #form-submitがそれにバインドされている​​機能は発生しませんsubmitボタンのIDです

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

。

フローを中断することなくフォームからデータを取得する方法はありますか？

Answer 1

送信機能を使用するだけではなく、送信をトリガする必要があります。 jQuery（ "＃test-form"）。trigger（ 'submit'）;