jQuery load() with callback function wont capture click()

Question

I am having no luck in getting a jqueryui dialog to ajax load a form, which inturn submits via ajax.

Everything works upto the point of catching the form that is being submited and instead sending it through an ajax call. Thus the form action is triggered and the browser redirected. The ajax call is never made.

My code is as follows

$(document).ready(function() {
$('.viewOrder').click(function() {
    $('#displayOrder').load(this.href, [], function() {
        console.log("landed here");

            $('#blah').click(function() {
                console.log("submiting the form via ajax");

                $.ajax({
                    url: "/ajax/orderupdate",
                    type: "GET",
                    data: data,
                    cache: false,

                    //success
                    success: function (data) {
                        console.log("worked:");
                    }
                });
                return false;
            });
    });
    return false;
});

});

.viewOrder is the a href that is ajax loaded. This works fine. I have read many similar questions on here and it seems load() does not execute scripts that are embeded in the return html, but my return code is pure html no scripts. Any ideas?

Answer 1

IMHO you should try and capture the submit instead of the click, that way you prevent submits done by keyboard aswell, and it might even fix your problem.

Answer 2

The events are bound on page load. At page load the form you are binding the click event does not exist. I use the livequery plugin but they added Live to jquery 4 which you can also use(i had some issues with IE so i went back to livequery)

So load livequery with your scripts http://docs.jquery.com/Plugins/livequery

and change

$('#orderUpdate').submit(function() {

to

$("#orderUpdate").livequery("submit", function() {