Question

我有一个div的列表当我点击div中的按钮时，我将div内容切换为包含表单的局部视图这是我点击该按钮时发生的代码：

@Html.ActionLink("edit", "EditUserLanguage", "UserLanguage", new { userLanguageId = Model.UserLanguageId }, new { @class = "editButton" })
...
$(document).on('click', '.editButton', function (e) {
        $.ajax({
            url: this.href,
            cache: false,
            success: function (html) {                
                var id = $(e.target).closest("div").attr("id");
                $("#" + id).empty();
                $("#" + id).append(html);
            }
        });
        return false;
    });

我添加的Html（部分视图）有：

 @using (Html.BeginForm("UpdateUserLanguage", "UserLanguage", FormMethod.Post, new { id = "updateUserLanagegeForm" }))
                            {
    ...

这个主视图div的列表在哪里，我添加这个新的局部视图我有这个代码：

$(function () {
            $('#updateUserLanagegeForm').submit(function () {
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {                        
                        alert("work");                        
                    }
                });
                return false;
            });
        }); //update

当我点击提交操作时，会调用方法并返回新的部分视图，但不是通过ajax。
我只返回部分视图。永远不会调用alert("work"); 这个ajax调用不起作用的原因是什么？

Answer 1

submit处理程序未附加到表单，因为表单在dom准备好后加载。所以将代码更改为 -

$('body').on('submit','#updateUserLanagegeForm',(function () {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (result) {                        
            alert("work");                        
        }
    });
    return false;
});

这会将处理程序附加到表单中，即使它是动态添加的。

动态添加形式ajax不起作用

1 个答案: