如何在jQuery中獲取動態創建的表單的ID

Question

我正在使用Bootstrap模態來顯示ASP.Net MVC5表單，使用對相關控制器的jquery ajax調用將表單動態插入到div中，然后將其打開。

我需要攔截表單的提交，因此我想綁定到jquery中的表單的commit事件，但是到目前為止，由於動態表單當然不存在，因此只能綁定到所有表單的commit事件。主視圖被渲染，例如

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

而不是

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

盡管進行此類工作，但存在一個問題，就是我實際上在此視圖中具有3種不同的動態形式，可以使用模式彈出窗口來顯示它們，因此我需要做以下2件事之一：

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