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

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

因此，$('form.ajax').on('submit',..会查找form元素，并在submit元素可能不form函数绑定到回调>已创建。这可能是您没有得到任何回复的原因。

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

委派事件的优势在于，他们可以处理来自稍后添加到文档的后代元素的事件。通过选择附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。

因此，您基本上将侦听器绑定到保证位于DOM中的父容器，然后只找到该事件的target。

例如，假设我想收听ID为click的按钮的foo事件，该按钮是我在div内{id}为container动态创建的。我可以通过这样做来听取这个点击：

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

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

希望它能让你开始朝着正确的方向前进。

Ajax不处理由Javascript生成的表单

1 个答案: