AJAX表单提交无法正常运行

Question

我正在尝试创建一组JavaScript函数，允许我动态加载和提交表单。 我已经设法创建一个将表单加载到页面中的工作函数，但是我无法使提交函数正常工作。 当我点击提交时，已经加载的表单（使用JavaScript加载功能）消失，原始内容重新出现。 此外，提交功能中的警报也不会出现。

我查看了整个网站并发现了类似的问题，但没有一个在使用AJAX加载表单然后使用AJAX提交，所有其他已经加载了表单。

任何帮助将不胜感激，我对使用AJAX非常新。

形成

echo $Error;
echo '<form id="login" method="post">';
echo '<input type="test" name="Email" placeholder="exsample@exsample.exsample"';
if(isset($Email)) echo "value = ".$Email;
echo '      />'."<br />";
echo '<input type="password" name="Pass" placeholder="Password" />'."<br />";
echo '<input type="submit" value = "Login"/>'."<br />";
echo '</form>';

加载页面功能

function Page(url,output)
{
    var Request = '';
    if (window.XMLHttpRequest)
    {
        Request=new XMLHttpRequest();
    }
    else
    {
        Request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    Request.onreadystatechange=function()
    {
        if (Request.readyState==4 && Request.status==200)
        {
            document.getElementById(output).innerHTML = Request.responseText;
        }
    }
    Request.open("GET",url,true);
    Request.send();
}

提交功能

$(function () {
$('form#login').on('submit', function(e) {
    alert('Found');
    $.ajax({
        type: 'post',
        url: 'php/login.php',
        data: $(this).serialize(),
        success: function (complete) {
            document.getElementById('output').innerHTML = complete;
        }
    });
    e.preventDefault();
  });
});  

Answer 1

如果您使用AJAX加载表单，则需要委派的事件处理程序：

$(document).on('submit', 'form#login', function(event) {
    // your AJAX form submission code here
});

当你使用.on()执行它时，它正在寻找那个元素存在于那一点，但它没有，这意味着你最终不会被绑定任何事件处理程序。

您的服务器端代码中还有一个拼写错误： <input type="test"那应该是type="text"

完整代码：

$(function () {
    $(document). on('submit', 'form#login', function(e) {
        alert('Found');
        $.ajax({
            type: 'post',
            url: 'php/login.php',
            data: $(this).serialize(),
            success: function (complete) {
                document.getElementById('output').innerHTML = complete;
            }
        });
        e.preventDefault();
    });
});