Ajax не обрабатывает форму, сгенерированную Javascript

Question

У меня возникла проблема, когда при создании HTML-формы с javascript ajax не обрабатывает ее вообще и просто отправит меня на пустую страницу PHP-действия. Эта страница пуста, потому что я добавил чек, чтобы узнать, пустые поля формы или нет.

Форма создается с помощью 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">'; 
    } 

Форма создан без Javascript:

<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> 

Аякса:

$('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?

Answer 1

Возможная причина для функции submit не получает срабатывает в вашем яваскрипте функции, потому что вы создаете этот элемент formдинамически. Когда я говорю динамически, я имею в виду, что этот элемент создается определенно после завершения первоначальной рендеринга страницы. Когда браузер первоначально отображает вашу страницу, он создает дерево DOM, анализирует javascript и связывает все обработчики событий.

Итак, $('form.ajax').on('submit',.. ищет form элемента и связывает функцию submit на обратный вызов, в то время, когда может не был создан form элемент. Это может быть причиной, по которой вы не получите никакого ответа.

Я бы предложил прочитать о событии delegation.

делегированного событие имеет то преимущество, что они могут обрабатывать событие от элементов-потомков, которые добавляются к документу в более позднее время. Выбирая элемент, который, как гарантируется, присутствует в момент присоединения делегированного обработчика событий, вы можете использовать делегированные события, чтобы избежать необходимости часто присоединять и удалять обработчики событий.

Таким образом, вы в основном связываете слушателей с родительским контейнером, который, как гарантируется, находится в DOM, а затем просто найдите target этого события.

Например предположим, что я хочу, чтобы слушать click события кнопки с идентификатором foo, что я создаю динамически внутри div с идентификатором container. Я могу слушать этот клик, делая это:

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

Другой очень хорошая статья о порядке событий в браузерах упоминается here.

Надеюсь, вы начнете в правильном направлении.