Question

我使用Bootstrap模式显示ASP.Net MVC5表单，使用对相关控制器的jquery ajax调用将表单动态插入到div中，然后打开。

我需要拦截表单的提交，所以我想在jquery中绑定到表单的submit事件但是到目前为止只能绑定到所有表单的提交事件，因为动态表单当然是在呈现主视图时不存在，例如

$('form').submit(...)

而不是

$('#serverForm').submit(...)

虽然有这样的作品，但它有一个问题，我在这个视图中实际上有三种不同的动态形式，可以使用模态弹出窗口显示，因此我需要做两件事之一：

A）（理想情况下）设法拦截每个表单的提交事件。 B）在全局表单事件处理程序中，标识已提交的表单。

我已经尝试了我能想象的每个选项来使用选项A，包括将绑定添加到弹出模态的代码中。一切都没有成功。

我目前正在尝试使用选项B，以便我可以决定在何处发布表单。这至少在提交表单时被调用，但我的问题是我无法获取已提交的表单的ID或名称，因此无法知道它是哪一个。

我有以下处理程序：

<script>
    $(function () {
        $('form').submit(function(e) {
            // this is always null
            var id = $(this).attr('id');
            $.ajax({
                url: '@Url.Action("EditServer", "AccountAdmin")',
                data: new FormData(this),
                ...
            });
        });
    });
</script>

在这个处理程序中，我尝试了以下内容（再加上一些！）来获取表单的id：

this.id
$(this).id
$(this).attr('id');
$(this).prop('id');

我尝试在ajax调用之后添加处理程序来填充模式，如下所示：

$(".server-link").click(function (event) {
    event.preventDefault();
    $.ajax({
        url: $(this).attr("href"),
            cache: false,
            type: "GET",
            dataType: "html",
            success: function (data, textStatus, XMLHttpRequest) {
                $('#serverDiv').html(data);
                $('#serverModal').modal('show');
                $('form').submit(function (e) {
                    var id = $(this).attr(id);
                    // test to see if handler called
                    alert(id);
                });
            },
            error: function (jgXHR, textStatus, errorThrown) {
                //The commented out message is full of Html but includes compilation errors etc from the server
                //alert('An error occured: ' + jgXHR.responseText);
                alert(textStatus + ':' + errorThrown);
            }
        });
    });

这让我疯狂！我已经尝试过各种各样的帖子的各种想法，没有任何乐趣。我需要使用FormData（至少在一个案例中）发布，因为涉及文件上传（图像）。非常感谢任何帮助。

Answer 1

请改用：

var id = $(e.target).attr('id');

Answer 2

问题是您的JavaScript代码在表单实际添加到页面之前正在运行。使用AJAX时，您需要在回调中运行所需的任何JavaScript：

$.get('/some/url', function (result) {
    $('#whatever').html(result);

    $('form').submit(function(e) {
        var id = $(this).prop('id');
        // do whatever with id
    });
});

如何在jquery中获取动态创建的表单的id

2 个答案: