javascript - Ajax 不处理由 Javascript 生成的表单

Question

我遇到一个问题，当我使用 javascript 创建 HTML 表单时，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>

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 的时间和地点？

Answer 1

submit 函数未在您的 javascript 函数中触发的一个可能原因是您创建了此 form 元素动态。当我说动态时，我的意思是这个元素肯定是在初始页面呈现完成后创建的。当浏览器最初呈现您的页面时，它会创建 DOM 树、解析 javascript 并绑定(bind)所有事件处理程序。

因此，$('form.ajax').on('submit',.. 查找 form 元素并绑定(bind) submit 函数在 form 元素可能未被创建时回调。这可能是您没有得到任何响应的原因。

我建议阅读有关事件 delegation 的内容.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

所以您基本上将监听器绑定(bind)到保证在 DOM 中的父容器，然后只需找到该事件的 target。

例如，假设我想监听一个带有 id foo 的按钮的 click 事件，我在一个带有 id 的 div 中动态创建容器。我可以通过这样做来听那个点击:

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

引用了另一篇关于浏览器事件顺序的非常好的文章 here .

希望它能让您朝着正确的方向开始。