How to get the id of a dynamically created form in jquery

Question

I am using a Bootstrap modal to display an ASP.Net MVC5 form, the form is inserted dynamically into a div using a jquery ajax call to the relevant controller and then opened.

I need to intercept the submission of the form so I would like to bind to the submit event of the form in jquery but have so far only been able to bind to the submit event of all forms since the dynamic forms are of course not present when the main view is rendered eg

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

rather than

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

Whilst this sort of works, it has a problem in that I actually have 3 different dynamic forms in this view which can be shown using modal popups, thus I need to do one of 2 things:

A) (ideally)manage to intercept the submit event for each form. B) in the global form event handler, identify which form has been submitted.

I have tried every option I can imagine to use option A including adding the binding to the code which pops the modal. all without success.

I am currently trying to go with option B so that I can then decide where to post the form. This does at least get called when a form is submitted but my problem is that I cannot get the id or name of the form which has been submitted and thus have no way of knowing which one it is.

I have the following handler:

<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>

Within this handler I have tried the following (plus a few more!) to get the form's id:

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

I have tried adding the handler after the ajax call to populate the modal like this:

$(".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);
            }
        });
    });

It's driving me bonkers! I have tried every combination of ideas from various posts with no joy. I need to post using FormData (in one case at least) because there is a file upload (an image) involved. Any assistance is much appreciated.

Answer 1

使用此代替：

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

Answer 2

The problem is that your JavaScript code is running before the form has actually been added to the page. When using AJAX, you need to run whatever JavaScript you need in the callback:

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

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