JQuery添加live()侦听器以形成处理程序

时间:2011-08-12 18:41:54

标签: jquery forms

我的index.html页面上有以下代码。每当我在此页面上提交表单时,警报将被选中并显示在屏幕上,然后输出表单处理脚本将被转储到#results div中。完美!

$('form').ajaxForm({
    beforeSubmit: function() {

        alert("Form submitted!");

        $('#results').html('Submitting...');
    },

    success: function(output) {
        var $out = $('#results');
        $out.html('Your results:');
        $out.append('<div>'+ output +'</div>');
    }
});

但是,如果我要使用新表单更新页面上的div然后提交这个新的可用表单,我会被重定向到一个空白页面,其中包含表单处理脚本的结果。

问题:

有没有办法避免此页面更改并在保留在当前页面时提交表单?

我一直在玩.live()和其他几个人,但似乎无法理解它......

有什么建议吗?

5 个答案:

答案 0 :(得分:1)

只需从form中取出#results或更新表单html $('form').html('whatever');,即可保存您的事件。

答案 1 :(得分:1)

最简单的方法是在创建新的.ajaxForm()元素后绑定<form/>

function before(){
  alert("Form submitted!");
  $('#results').html('Submitting...');
};

function allGood(){
  var $out = $('#results');
  $out.html('Your results:');
  $out.append('<div>'+ output +'</div>');
}

$('form').ajaxForm({
    beforeSubmit: before,
    success: allGood
});

//do something to create a new form
var $form = $("<form/>");

$form.ajaxForm({
    beforeSubmit: before,
    success: allGood
});

$("#someDiv").append($form);

<强> Example on jsfiddle

答案 2 :(得分:1)

或者您可以使用jquery ajax方法并在那里执行必要的成功功能。

在执行AJAX请求时,可以复制像验证等形式的所有好处。

答案 3 :(得分:0)

Ajax处理程序很好但你仍然需要将表单绑定到一个事件,使其通过ajax提交,而不是通过浏览器中的普通POST提交。

试试这个:

$(document).on('submit', 'form', function (e) {
    e.preventDefault();
    console.log('your logic here');
});

答案 4 :(得分:-1)

您可以使用livequery。 Livequery会将ajaxForm附加到DOM中加载的任何表单

$('form').livequery(function(){
$(this).ajaxForm({
    beforeSubmit: function() {

        alert("Form submitted!");

        $('#results').html('Submitting...');
    },

    success: function(output) {
        var $out = $('#results');
        $out.html('Your results:');
        $out.append('<div>'+ output +'</div>');
    }
});

});