jQuery工具:如何从动态呈现到页面的表单中防止提交事件

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

我有一个索引。有按钮的aspx页面。如果单击按钮，将弹出一个创建覆盖。在这个覆盖层中是形式。创建叠加表单页面和索引。aspx分离。整个表单被呈现到索引中。aspx使用jQuery覆盖插件http://flowplayer.org/tools/overlay/index.html($(文档))。准备好(函数():

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.

. contentwrap是div元素，其中显示覆盖(表单)。

How can I prevent the form submit via jQuery?

如何通过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.

完成后，我希望通过Ajax从表单发送数据，并更新索引上的表。通过jQuery使用Ajax实现aspx。

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.

当我按下一个按钮时，一个外部页面被呈现为一个div，该页面以叠加的形式弹出。按照我的理解，onLoad方法在加载所有内容之后执行。这似乎是个问题。我的“new_employee”表单有时是完全加载的，有时不是。因为这一次我得到了警报，其他时候我没有警觉。这是在Chrome。在Firefox中，这根本不起作用。

Has anybody any suggestions for me?

有人给我提建议吗?

2 个解决方案

#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.

当您创建表单时，您可以绑定到表单的onSubmit并通过ajax提交它，然后返回false以阻止它提交。

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;
}

#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.

仅仅把它放在。ready上是不行的。

#1