Инструменты jQuery: как предотвратить событие отправки из формы, которая динамически отображается на странице

Question

У меня есть страница Index.aspx с кнопкой.Если вы нажмете кнопку, появится всплывающее окно создания.В этом наложении лежит форма.Таким образом, страница создания оверлея и Index.aspx разделены.Вся форма отображается в Index.aspx с использованием плагина jQuery Overlay из http://flowplayer.org/tools/overlay/index.html (в $ (документ) .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 - это элемент div, гдеоверлей (форма) отображается в формате.

Как я могу предотвратить отправку формы через jQuery?

Проблема, с которой я столкнулся, заключается в том, что формы нет в $ (document) .ready(function () function.

Когда это будет сделано, я хочу отправить данные из формы через Ajax и обновить таблицу в Index.aspx, также используя Ajax с jQuery.

Это делаетпока не работает (в функции готовности документа), потому что формы там нет:

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

Как я могу это сделать?

Заранее большое спасибо!

РЕДАКТИРОВАТЬ Теперь я попробовал это в функции $ (document) .ready, но безуспешно: (

$(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');
                }
            });
        });

Когда я нажимаю кнопку, внешняя страница отображается в divи страница отображается как наложение. Метод onLoad выполняется ПОСЛЕ того, как все загруженоЯ понял.И, похоже, проблема .Моя форма "new_employee" иногда полностью загружается, а иногда нет.Из-за этого в одно время я получаю предупреждение ПРЕДОТВРАЩЕНИЕ, а в другое время я не получаю предупреждение.Это в Хроме.В Firefox это не работает вообще.

Есть ли у меня какие-либо предложения для меня?

Answer 1

Если элемент не существует на странице, когда события связаны (когда документ готов в этом случае), даже не может быть привязан к нему. Это должно быть связано после того, как элемент создан. Итак, после того, как вы запустите код, чтобы открыть оверлей, вам нужно будет выполнить:

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

Итак, я не вижу вашу страницу, но это будет что-то вроде:

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

Просто иметь его в .ready не получится.

Answer 2

Когда вы создаете форму, вы можете привязать ее к onSubmit и отправить через ajax, а затем просто вернуть false, чтобы остановить ее отправку.

Например:

$('.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;
}