Question

第一次提交按预期工作，但下次完全回发。我正在使用jQuery.form插件，特别是.ajaxSubmit(options)调用来提交表单。有几个级别的包装div，但是我调试了button.click绑定，我无法弄清楚为什么第二次，即使使用相同的变量，它也会发布一个完整的帖子，我的部分视图会返回全新页。

此处，buttonid和screenid在两个帖子中都相同。我指出这是因为它们是根据命名约定计算的，例如<name>Outer（包装器），<name>（更新目标）和<name>Form（要提交的表单）

$('.formButton').click(function () {
    var buttonid = $(this).attr('id');
    var screenid = $('#' + buttonid).closest('div:not(.CSRForm)').attr('id').replace('Outer', '');
    //appends a hidden element so I know which button was pressed when posted
    $('#' + screenid + 'Form').append('<input type="hidden" name="submitButton" value="' + buttonid.replace(screenid, '') + '" />');
    $('#' + screenid + 'Form').submit();
});

请注意表单中的.formButton元素不是，这就是我必须绑定提交事件的原因。我的局部视图只返回表单而不是按钮（它们是动态的）

这里是.ajaxSubmit：

$('.CSRForm').submit(function () {
    var needsValidation = "yes";
    if (needsValidation) {
        $(this).ajaxSubmit({
            target: '#AccountSetup',
            replaceTarget: false,
            success: StepCallWithForm //to check whether the response is valid for redirecting
        });
        return false;
    }
});

和我的MVC行动如果相关：

    public ActionResult AccountSetup(AccountSetupViewModel vm, string submitButton)
    {
        if (!ModelState.IsValid)
        {
            return PartialView(vm);
        }
        else
        {
            return Content(submitButton + ",AccountSetup");
        }
    }

修改将此行直接插入我的$(function() {：

后

$('#AccountSetup').ajaxForm();

我能够停止完整的回发。在Firebug中，现在我看到ajax回发到/CSR/Home/CSR?，这是所有这些东西开始的地方。这就像表格失去了它的动作属性。我的活动是否会以某种方式交火？

Answer 1

如果使用部分视图替换成功回调中的原始表单，则可能会发生这种情况。

因此，当您删除一些HTML元素时（如从服务器替换部分视图的现有HTML），所有事件也都消失了。重新添加相同的HTML（从您的角度来看）只是浏览器的一些新HTML。它不会假设这个新HTML是否与旧代码相关。如果您希望新表单像以前一样工作，那么您必须重新添加所有功能和事件。

如果是这种情况，表单将不再附加submit Ajax操作，因此第二次执行完整帖子。为此，您需要在success函数中重新连接submit事件：

$(function() {
    ajaxifyForm();
});

function ajaxifyForm() {
    $('#AccountSetup').ajaxForm({
        target: '#AccountSetup',
        replaceTarget: false,
        success: stepCallWithForm
    });
}

function stepCallWithForm(result) {
    // If you replace the #AccountSetup form with the 
    // returned partial result you need to reattach the AJAX submit:
    ajaxifyForm();
}

Answer 2

您可以使用jQuery的live（）事件绑定，而不是绑定到click事件，它可以在AJAX加载后继续存在。您可以通过替换：

来完成此操作

$('.formButton').click(function () {

使用

$('.formButton').live("click", function () {

Answer 3

我知道这是一个老问题，但我只想加2美分。

@ Sohnee的答案将起作用：live()完成工作。但是，它一直是deprecated。它应该替换为on：

$("#WrapperDiv").on({
      click:myFunction
   },"#formButton");

Ajax submit在首次提交后发布完整帖子

3 个答案: