JavaScriptが生成したフォームをAjaxで処理しない

Question

JavaScriptを使用してHTMLフォームを作成すると、ajaxはそれを一切処理せず、空白のアクションPHPページに送信されるという問題があります。フォームフィールドが空であるかどうかをチェックするために、このページは空白です。 JavaScriptで作成された

フォーム：Javascriptをせずに作成

function createForm() { 
    var f = document.createElement('form'); 
    f.setAttribute('method','post'); 
    f.setAttribute('action','action.php'); 
    f.setAttribute('class', 'ajax'); 
    f.innerHTML = '<span style="color: black; display: inline;">Name: <input class="popup-form-fields" id="inputName" onkeyup="validateName(); theCheck();" onkeydown="validateEmail(); theCheck();" onclick="validateName();" type="text" name="name" autocomplete="off"></span><label id="commentName" class="label1"></label>'; 
    f.innerHTML += '<div class="space"></div>'; 
    f.innerHTML += '<span style="color: black; display: inline;">Email address: <input class="popup-form-fields" id="inputEmail" onkeyup="validateEmail(); theCheck();" onkeydown="validateEmail(); theCheck();" onclick="validateEmail();" type="email" name="email" autocomplete="off"></span><label id="commentEmail" class="label1"></label>' 
    f.innerHTML += '<div class="space"></div>'; 
    f.innerHTML += '<span style="color: black; display: inline;">Phone number: <input class="popup-form-fields" id="inputPhone" onkeyup="validatePhone(); theCheck();" onkeydown="validatePhone(); theCheck();" onclick="validatePhone();" type="tel" name="phone" autocomplete="off"></span><label id="commentPhone" class="label1"></label>'; 
    f.innerHTML += '<div class="space"></div>'; 
    f.innerHTML += '<span style="vertical-align: top; color: black; display: inline;">Details: <textarea class="popup-form-fields" id="inputDetail" onkeyup="validateDetail(); theCheck();" onkeydown="validateDetail(); theCheck();" onclick="validateDetail();" name="details" autocomplete="off"></textarea></span><label id="commentDetail" class="label1"></label>'; 
    f.innerHTML += '<div class="space"></div>'; 
    f.innerHTML += '<input id="sub" type="submit" value="Send">'; 
    } 

フォーム：

<form method="POST" action="book-priv-party-complete.php" class="ajax"> 
    <span style="color: black; display: inline;">Name: <input class="popup-form-fields" id="inputName" onkeyup=" 
validateName(); theCheck();" onkeydown="validateName(); theCheck();" onclick="validateName();" type="text" 
name="name" autocomplete="off"></span><label id="commentName" class="label1"></label> 
    <div class="space"></div> 
    <span style="color: black; display: inline;">Email address: <input class="popup-form-fields" id="inputEmail" 
onkeyup="validateEmail(); theCheck();" onkeydown="validateEmail(); theCheck();" onclick="validateEmail();" type= 
"email" name="email" autocomplete="off"></span><label id="commentEmail" class="label1"></label> 
    <div class="space"></div> 
    <span style="color: black; display: inline;">Phone number: <input class="popup-form-fields" id="inputPhone" 
onkeyup="validatePhone(); theCheck();" onkeydown="validatePhone(); theCheck();" onclick="validatePhone();" type= 
"tel" name="phone" autocomplete="off"></span><label id="commentPhone" class="label1"></label> 
    <div class="space"></div> 
    <span style="vertical-align: top; color: black; display: inline;">Details: <textarea class="popup-form-fields" 
id="inputDetail" onkeyup="validateDetail(); theCheck();" onkeydown="validateDetail(); theCheck();" onclick=" 
validateDetail();" name="details" autocomplete="off"></textarea></span><label id="commentDetail" class="label1 
"></label> 
    <div class="space"></div> 
    <input id="sub" type="submit" value="Send"> 
</form> 

AJAX：

$('form.ajax').on('submit', function() { 
    var that = $(this), 
     url = 'action.php', 
     type = 'post', 
     data = {}; 
    that.find('[name]').each(function (index, value) { 
     var that = $(this), 
     name = that.attr('name'), 
     value = that.val(); 
     data[name] = value; 
    }); 
    $.ajax({ 
     url: url, 
     type: type, 
     data: data, 
     success: function() { 
     removeElement(); 
     document.getElementById('errorCode').innerHTML = "Your message was sent"; 
     document.getElementById('errorCode').style.color = "green"; 
     setTimeout(function() {document.getElementById('errorCode').style.display = "none";}, 2000); 
     alert("It worked"); 
     }, 
     error: function() { 
     removeElement(); 
     document.getElementById('errorCode').innerHTML = "Your message was not sent"; 
     document.getElementById('errorCode').style.color = "red"; 
     setTimeout(function() {document.getElementById('errorCode').style.display = "none";}, 2000); 
     } 
    }); 
    return false; 
    }); 

この問題の原因は、Javascriptが実行されている場所と場所である可能性がありますか？あなたはこのform要素を動的を作成するので、あなたのjavascript関数でトリガーなっていないsubmit機能について

Answer 1

考えられる理由はあります。動的に言うと、最初のページのレンダリングが完了した後、この要素が確実に作成されることを意味します。ブラウザが最初にページをレンダリングすると、DOMツリーが作成され、javascriptが解析され、すべてのイベントハンドラがバインドされます。

ので、$('form.ajax').on('submit',..はform要素を探し、form要素がないが作成された可能性があります時にコールバックにsubmit機能をバインドします。それはあなたが何の反応も得られない理由です。

イベントdelegationについて読むことをお勧めします。

委任イベントは、それらが後の時点で文書に追加される子孫要素からのイベントを処理することができるという利点を有します。デリゲートされたイベントハンドラがアタッチされた時点で存在することが保証されている要素を選択することにより、デリゲートされたイベントを使用して、イベントハンドラを頻繁にアタッチしたり削除したりする必要がなくなります。

DOM内にあることが保証されている親コンテナにリスナーを基本的にバインドして、そのイベントのtargetを見つけます。例えば

は、私がID containerでdiv内部で動的に作成するID fooとボタンのclickイベントに耳を傾けたいとします。私はこれを行うことにより、そのクリックを聞くことができます：ブラウザでのイベントの順序で

$("div#container").on("click", function(event) { 
    console.log("clicked: " + event.target.nodeName); //Will output button when this element is clicked. 
}); 

別の本当に良い記事をhere参照されています。

あなたが正しい方向にスタートすることを願っています。