jQuery Tools: How to prevent a submit event from a form that is rendered dynamically into a page

Question

I have an Index.aspx page with a button. If you click the button a create overlay pops up. In this overlay lies the form. So the create overlay form page and the Index.aspx are seperated. The whole form is rendered into the Index.aspx using jQuery Overlay plugin from http://flowplayer.org/tools/overlay/index.html (in $(document).ready(function ():

var triggers = $("a[rel]").overlay({
                expose: '#3B5872',
                effect: 'apple',
                closeOnClick: false,
                onBeforeLoad: function () {
                    var wrap = this.getContent().find(".contentWrap");
                    wrap.load(this.getTrigger().attr("href"));
                }
            });

.contentWrap is the div element where the overlay (form) is rendered in.

How can I prevent the form submit via jQuery?

The problem I have is that the form is not there at the $(document).ready(function () function.

When this done I want to send the data from the form via Ajax and update the table on the Index.aspx by also using Ajax with jQuery.

This does not work for now (in document ready function), because the form is not there:

    $("#formCreate").submit(function(event){
        event.preventDefault();
        hijack(this, update_employees, "html");
    });

How can I do this?

Thank you very much in advance!

EDIT Now I tried this in the $(document).ready function, with no success :(

$(document).ready(function () {
            $("a[rel]").overlay({
                mask: '#3B5872',
                effect: 'apple',
                api: true,
                onBeforeLoad: function () {
                    var wrap = this.getOverlay().find(".contentWrap");
                    wrap.load(this.getTrigger().attr("href"));
                },
                onLoad: function () {
                    $("#new_employee").submit(function (event) {
                        event.preventDefault();
                        alert('PREVENT');
                        hijack(this, update_employees, "html");
                    });
                    alert('onLoad');
                }
            });
        });

When I press a button an external page is rendered into a div and the page is popped up as an overlay. The onLoad method is executed AFTER everything is loaded as I understood. And there seems to be the problem. My "new_employee" form is sometimes completly loaded and sometimes not. Because of this at one time I get the alert PREVENT and other times I got no alert. This is in Chrome. In Firefox this does not work at all.

Has anybody any suggestions for me?

Answer 1

When you create the form you can bind to the form's onSubmit and submit it via ajax and then just return false to stop it from submitting.

For example:

$('.contentWrap form').submit(function() {
        $.ajax({
            type: $(form).attr('method'),
            url: $(form).attr('action'),
            data: $(this).serializeArray(),
            success: function (data) {
               //do something on success
            }
        });
        return false;
}

Answer 2

If an element does not exist on the page when the events are bound (when the document is ready in this case) the even can't be bound to it. It needs to be bound after the element is created. So, after you run the code to open the overlay, you then need to run:

$(submitButton).submit(function(event) {event.preventDefault();});

So, I can't see your page, but it would be something like:

$(overlay).open();
$(submitButton).submit(function(event) {event.preventDefault();});

Just having it in the .ready will not work.