Jquery Script Doesn't work for new elements

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

Are you saying that the response from the ajax call could be another form, which is then not behaving in the same way as the first form? — Pabs123, Jan 26 '16 at 00:28
@Kamran Borbor share the HTMl code as well. Verify the structure how new form is being populated. — pratikpawar, Jan 26 '16 at 00:31
@juporag `.live()` has been obsolete for some time, you should link to an example that uses `.on()` instead. — jmoerdyk, Jan 26 '16 at 00:35
Form submit event for form as new element is not working because it is dynamic element in this case. Check out the similar issues and problems on SO. Also juporag 's reference is what you are looking for. add an event listener on parent element of form. `body / document` — pratikpawar, Jan 26 '16 at 00:38
@pratikwebdev, the example of my script http://paste.ubuntu.com/14667980/ — Kamran Borbor, Jan 26 '16 at 00:42

Alon Eitan · Accepted Answer · 2016-01-26T00:38:08.717

2

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

edited Jan 26 '16 at 00:38

answered Jan 26 '16 at 00:31

Alon Eitan

11,997
8
49
58

2

`#result` holds dynamic elements. Parent `form` is still out there. In this case OP needs to `form` submit events. OP may need to use `$(document).on` or `body may be. – pratikpawar Jan 26 '16 at 00:35
@pratikwebdev - Thank you for that, I have updated my answer – Alon Eitan Jan 26 '16 at 00:38
Good work! no worries. – pratikpawar Jan 26 '16 at 00:40

Marcos Casagrande · Answer 2 · 2016-01-26T00:40:03.960

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

Jquery Script Doesn't work for new elements

2 Answers2