Question

我的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()和其他几个人，但似乎无法理解它......

有什么建议吗？

Answer 1

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

Answer 2

最简单的方法是在创建新的.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

Answer 3

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

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

Answer 4

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

试试这个：

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

Answer 5

您可以使用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>');
    }
});

});

JQuery添加live（）侦听器以形成处理程序

问题：

5 个答案: