Jquery Script Doesn't work for new elements [duplicate]

Question

Currently, I wrote Ajax Form that works very well, all output from the form will puts in Result, expect when the result of form is another form at this time, my script doesn't works for new form that was the result of old form

My script doesn't work for new form So, I needs to make that new form works like old one, is that possible ?

$(document).ready(function()
{
    $("form").submit(function(e)
    {
        e.preventDefault();
        $("#Result").html("<div id='Loading'></div>");

        $.ajax(
        {
            type: "POST",
            data: $(this).serializeArray(),
            success: function(Data)
            {
               $("#Result").html(Data);
            }
        });
    });
});

Answer 1

Try

$("#Result").on("submit", "form", function(e) { 
    ...  YOUR CODE  .....
});

EDIT: If you want to catch a global form submit event (Thanks @pratikwebdev):

$(document).on("submit", "form", function(e) { 
    ...  YOUR CODE  .....
});

Answer 2

Try this:

$("body").on("submit", "form", function(e){ 
  //Your code.
});

The problem you were having, happened because when you added the submit listener to "form", the dynamically created form elements didn't exist, so those new form didn't had a listener attached to them.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

More info on jQuery.on and event delegation