Question

我正在使用一个包含不同行的表和每行的编辑按钮。

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

在为此表单创建ajax时会出现问题。

我一如既往地使用相同的方法，但由于某种原因，ajax提交不适用于此表单，而只是进入PHP页面。

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

这是一个例子：

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

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

2）我单击编辑，showUserDetailsForm.js创建表单。形式如下：

$('<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');

3）我点击提交按钮，它正确返回我正在寻找的JSON（updateSuccess）。

4）表单不是通过ajax处理的，它只是去了它的动作。

保存详细信息的ajax调用代码为：

// 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;
});
});

我看不出为什么它不起作用的任何原因（无法找到类名等的任何错误）并且javascript中没有错误。

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

谢谢！

Answer 1

对于新创建的DOM元素处理程序，您应该使用JQuery＆＃39; on()。

对于您的问题，您应该将$(".editUserDetails-form").submit(function(){替换为$("body").on('submit', '.editUserDetails-form', function(){

最后但并非最不重要的是，@ Brunis是对的 - 您应该在方法中添加event.preventDefault()（自动注入事件参数）

Answer 2

如果您想干预默认行为，您应该 1.在onsubmit事件中使用e.preventDefault（）callbackFunction或 2.使用不提交的“脚本”按钮，例如。按钮类型=按钮不会提交，但是您必须将onsubmit事件调整为该按钮的onclick事件。

此外，当您不希望这种情况发生时，不需要在表单元素中使用方法和操作。

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

2 个答案: