フォーム提出を確認する

Question

私のアプリケーションでは、JavaScriptを使用してフォームを提出する必要があります。必要に応じて、私はDOMに注入（またはそこからそれらを削除）HTMLとして完全に生成されたフォームを、取得、サーバから

[...document.querySelectorAll('form')].forEach(form => { 
    form.addEventListener('submit', e => { 
     //doing the processing here 
     e.preventDefault(); 
    }) 
}) 

：私は、私はこのコードのことを行うことができますことを知っています。これにより、フォーム要素が削除されたか登録されていないため、登録されたイベントハンドラーが機能しなくなります。

はそれに匹敵する世界»提出リスナー«を、登録することが可能です：

window.addEventListener('click' e => { … }); 

DOMが変更された場合削除されることはありません何

、または私が提出ハンドラたびDOMを登録する必要があります変更？

上記の委任戦略は私が探しているものだからですが、代わりにクリックイベントではなく、サブミットイベントではないからです。

Answer 1

提出イベントはバブルアップしているので間違いなくキャッチすることができます。したがって、動的フォームが追加および削除されるときに常に存在する親要素からリスニングすることで、必要なものを達成できます。私はbodyやhtmlレベルを聞くのではなく、IDを持つラッパー要素を使ってこのことをするのが好きです。ここでは、バニラjsを使用した非常に単純な例を示します。ここCodepen：http://codepen.io/bsidelinger912/pen/RGbWYb

HTML：

<div id="form-wrapper"> 
    <h2>Form 1</h2> 
    <form id="form1"> 
    <input name="test" placeholder="enter something" /> 
    <input type="submit" value="submit" /> 
    </form> 

    <h2>Form 2</h2> 
    <form id="form2"> 
    <input name="test" placeholder="enter something" /> 
    <input type="submit" value="submit" /> 
    </form> 
</div> 
<button id="form-adder"> 
    + Add a form 
</button> 

Javascriptを

var formWrapper = document.getElementById('form-wrapper'); 

// capture the submit event in the parent div 
formWrapper.addEventListener("submit", function(e) { 
    e.preventDefault(); 
    console.log('submit captured'); 

    var thisForm = e.srcElement || e.originalTarget; 
    console.log('form id:' + thisForm.id); 
    console.log(thisForm.test.value); 
}); 

// dynamically add divs and see we can still capture the submit 
var divNum = 3; 
function addDiv(e) { 
    e.preventDefault(); 

    formWrapper.innerHTML += '<h2>Form ' + divNum + '</h2>\ 
    <form id="form' + divNum + '">\ 
    <input name="test" placeholder="enter something" />\ 
    <input type="submit" value="submit" />\ 
    </form>'; 

    divNum++; 
} 

document.getElementById('form-adder').addEventListener('click', addDiv);