binding jquery function with form loaded after page

Question

I have a jquery form that is submitted with FormData (and using iframe if formdata isn't available) however when the form is submitted another form is generated. as this form is going to use a jquery function to submit, the jquery function doesn't seem to be binded with the form so instead of using event.stopDefault(); it submits to its default i.e. test.php

Another words my question is: when a form is loaded by ajax is there a method/way to reload/bind the jquery function to the new form?

Example Code:

js code that i have tried:

$(document).on('#resize', submit, function(e) {
            e.preventDefault();
            e.stopPropagation();
            if(window.FormData === undefined){
                alert("Form Data not supported");
            }
            else{
                var iframe = $('<iframe name="resizeiframe" id="resizeiframe" style="display: none" />');

                $("body").append(iframe);

                var form = $('#resize');
                form.attr("action", "resizer.php");
                form.attr("method", "post");
                form.attr("enctype", "multipart/form-data");
                form.attr("encoding", "multipart/form-data");
                form.attr("target", "postiframe");
                form.attr("file", $('#resizeimage').val());
                form.submit();

                $("#resizeiframe").load(function () {
                    iframeContents = $("#resizeiframe")[0].contentWindow.document.body.innerHTML;
                    $("#textarea").html(iframeContents);
                    $("#resizeiframe").remove();
                    $(document).find('#resizeiframe').remove();
                });
            }


});

form that is been submited after been generated by ajax but submitting regardless:

<form id="resize" action="resizer.php" method="post" onsubmit="return checkCoords();">
                <input type="hidden" id="x" name="x" />
                <input type="hidden" id="y" name="y" />
                <input type="hidden" id="w" name="w" />
                <input type="hidden" id="h" name="h" />
                <input type="hidden" id="resizeimage" name="image" value="'.$new_name.'"/>
                <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />
            </form>

p.s i have tried removing the onsubmit but this doesn't make a difference.

Search for delegation using .on() {prefered on jq 1.7+} or .delegate() just like @RPM's answer. — A. Wolff
– A. Wolff, Commented Sep 10, 2013 at 15:15
@A.Wolff i have tried both delegate and on but neither seem to work for me. i have updated with the code — Liam Sorsby
– Liam Sorsby, Commented Sep 10, 2013 at 15:30
Firstly, should be: $(document).on('submit','#resize',handler) — A. Wolff
– A. Wolff, Commented Sep 10, 2013 at 15:32
sorry just changed RPM answer from delegate to on and forgot to change these over! However the script still runs fine but submits as default — Liam Sorsby
– Liam Sorsby, Commented Sep 10, 2013 at 15:38
sorted it your correction was correct however in the process of testing it i had changed document to "body" and not changed it back. Thank you for your help — Liam Sorsby
– Liam Sorsby, Commented Sep 10, 2013 at 15:48

Ryan · Accepted Answer · 2013-09-10 20:40:59Z

2

If it is loaded dynamically then jQuery isn't able to be binded to it by using the default x.submit() functions.

Use something like this:

 $(document).delegate('#id_of_my_dynamic_form', 'submit', function(e) {
     e.preventDefault();
     // now you have the form
     // maybe serialize the form

     // var s = $(this).serialize();
 });

edited Sep 10, 2013 at 20:40

answered Sep 10, 2013 at 15:13

Ryan

14.7k9 gold badges68 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Liam Sorsby Over a year ago

i have tried $(document).on('#resize', submit, function(e) { after the $(document).ready(function() has been closed and it still seems to submit. I will update my code

Ryan Over a year ago

@LiamSorsby change submit to 'submit'

otaku Over a year ago

can't possibly thank you enough. Spent 2 hours figuring this out

Ryan Over a year ago

AbhyudayaSrinet I'm glad it was able to help you.

adamdehaven · Accepted Answer · 2013-09-13 15:43:20Z

0

Just change your first line to this:

$(body).on('submit', '#resize', function(e) {

You need to bind to an element that IS present on pageLoad

edited Sep 13, 2013 at 15:43

answered Sep 10, 2013 at 20:58

adamdehaven

5,92010 gold badges64 silver badges84 bronze badges

Collectives™ on Stack Overflow

binding jquery function with form loaded after page

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related