jQuery submit is not catching submit event after ajax loading of content

Question

I load content to my popup with jQuery Ajax load function and I use submit function in load functions callback function, but for some reason event is not fired at all. (I use jQuery jquery-1.3.2.min.js)

$('.popup-container').load(url, function(){ 
    /** Do some stuff here */
    $("form").submit(function() { 
        alert("Form submitted!");       
        return false;
    });
});

Answer 1

I believe return false stops it from submitting.

Answer 2

You can fix this by using the jquery method live() using live() with submit() has been added to jquery 1.4 so you should get an update. Here is a video tutorial on using live() with submit(). http://www.bennadel.com/blog/1772-jQuery-1-4-Live-Form-Submit-Support.htm

When using the live function your code should look like this

$("form").live('submit' , function() { 
    alert("Form submitted!");       
    return false;
});

$('.popup-container').load(url);

Answer 3

As Tim said, jQuery 1.4 has added support for submit handlers in the live function. His code should work for you.

If you can't use jQuery 1.4 for whatever reason, you'll need to reapply your handlers:

function applyHandlers(query) {
    $(query).submit(function() { alert('foo'); return false; });
}

applyHandlers('form');

$('.popup-container').load(url, function() {
    applyHandlers($('form', this));
});

There's much more elegant ways to do this, but you get the basic idea.