JQuery Rebinding On Vs Bind After AJAX Query

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

Solution 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 :)