Javascript 在使用jquery创建的表单上提交Ajax表单

我使用的是一个具有不同行的表，每行上都有一个编辑按钮

此编辑按钮使用ajax/json创建表单，以根据单击的行填写表单详细信息

然后，为该表单创建ajax时就会出现问题

我和往常一样使用相同的方法，但是由于某种原因，ajax提交在这个表单上不起作用，它只是进入了ProcessPHP页面

我只是想知道这是否是因为加载ajax调用的javascript代码时表单不在页面上

举个例子：

1） 该页面已加载，并包含在该页面上：

<script type="text/javascript" src="admin/js/showUserDetailsForm.js"></script>
<script type="text/javascript" src="admin/js/saveUserDetails.js"></script>

我看不出它不起作用的任何原因（找不到任何类名错误等），javascript中也没有错误

我唯一不确定的是表单是在加载代码后创建的

---

谢谢

如果你想干预默认行为，你应该 1.在onsubmit事件调用函数或 2.使用不提交的“脚本”按钮，例如button type=button将不提交，但是您必须将onsubmit事件调整为该按钮的onclick事件

---

另外，当您不希望表单元素中出现方法和操作时，也不需要在表单元素中包含它们。

对于新创建的DOM元素处理程序，您应该使用JQuery的

对于您的问题，您应该将

$（“.editUserDetails表单”）.submit（function（）{

替换为

$（“body”）.on（'submit'，'.editUserDetails表单'，function（）{

最后但并非最不重要的一点，@Brunis是正确的-您应该添加到您的方法中（事件参数是自动注入的）

我是如何忘记on（）的。我知道这与新创建的DOM元素有关。谢谢，工作正常！

$('<div id="admin-edituser-popup">'+
  '<div id="login-popup-title">Edit User:<button id="closeedituserform">Close</button></div>'+
  '<div id="login-popup-centre">'+
    '<form class="editUserDetails-form" action="admin/process/saveUserDetails.php" method="POST">'+
        'Editing Details for User:'+response.username+' , User ID:'+response.userID+
        '<input type="hidden" name="userid" value="'+response.userID+'">'+
        '<input type="text" name="username" value="'+response.username+'">'+
        '<input type="submit" value="Save User">'+
    '</form>'+
  '</div>'+
'</div>').appendTo('body');

// JavaScript - Save user details
$(document).ready(function(){
// When the form is submitted
$(".editUserDetails-form").submit(function(){
    $.ajax({
        type: "POST",
        url: "admin/process/saveUserDetails.php",
        data: $(".editUserDetails-form").serialize(),
        dataType: "json",
        success: function(response){

            if (response.updateSuccess) {
                alert('Saved');
            }

        }
    });
    return false;
});
});