JQuery rebinding on vs bind after AJAX query

Question

I would like to know why Jquery's .on was never called to rebind my submit button after a AJAX call, Since on is suppose to replace .bind I could not fathom that it was the problem. but i tried various things and the only thing to have worked was to use .bind instead of .on.

My form is attached to a dropdown list that will generate new data into the form on click. This was done on a AJAX Get call and on success i was selecting the form and using:

$('#formname').on('submit',function(){})

And i then tried

$('#formname').on('submit','form', function(){})

admittedly i got the above from a question that was never answered. jquery-ajax-form-using-onsubmit

I also tried attaching the on submit to the body element as it doesn't change with the AJAX function $('.container').on('submit','#formname', function(){}) suggested here: jquery bind functions and triggers after ajax call

but that was also ignored. I then tried replacing the type of 'submit' to 'button' then assign .on('click', etc... in case you could not rebind a submit button after the form had reached the DOM.

but the only thing that worked was calling .bind, i am lost as i am wanting to use the correct standards. my completed code looks like so, note wherever there is a .bind it was previously an .on which was not invoked.

<script type="text/javascript">
(function ($){
    $('select#<?php echo $dropdown; ?>').on('click', function(){
        var value = $(this).val();
        var form = 'form#<?php echo $gridName; ?>' 
        $.ajax({
            type: "GET",
            url: $(form).prop('action') ,
            data: { gg:value },
            dataType: "html",
            cache: false,
            success: function(htmlResponse){
                var src = $(form , htmlResponse);
                $('.page_1col_col1').html( src );
                //replace the submit with a input buton to tesk on click
                //$('#<?php echo $gridName; ?> input[type="submit"]').prop('type','button');
                $('#<?php echo $gridName; ?>').bind('submit',function (){
                    rowBinding();
                    //replace the submit with a input btn
                    $.ajax({
                        type:"POST",
                        url: $(form).prop('action'),
                        dataType: "html",
                        cache: false
                    });

                });
            }

        });
    });
}(jQuery));

$(document).ready(function(){
    $('#<?php echo $gridName; ?>').bind('submit',rowBinding);
});


function rowBinding(){ //stuff}</script>

Answer 1

It looks like you got very close to the correct solution, but got tripped up by a minor detail.

Your third example should have worked,

$('container').on('submit','#formname', function(){})

but container probably should have been '.container' or '#container', or even just document as 'container' would select a HTML element of type container.

Try this for a class named container:

$('.container').on('submit','#formname', function(){})

or this for an id of container:

$('#container').on('submit','#formname', function(){})

Or just use the document object (not a selector, hence no quotes)

$(document).on('submit','#formname', function(){})

Or use the body element:

$('body').on('submit','#formname', function(){})

Basically the deferred syntax of on binds to an element that will stick around for the life of the page, listening for the chosen event, and then selecting the target element via the selector supplied in the second parameter.

Update: Due to a bug related to styling using 'body' in delegated events is a bad idea. Your default should be document if nothing else is closer/convenient. The problem stems from a possible styling issue, where the body element gets a computed height of 0 and does not receive any mouse events. 'body' will likely work with submit events in that instance, but document is a safer "default" for all cases :)