代码之家 › 专栏 › 技术社区 › David Fox

ajaxsubmit在第一次提交之后会发布一篇完整的文章

jquery-plugins ajax asp.net-mvc jquery

David Fox · 技术社区 · 14 年前

第一次提交按预期工作,但下一次完全发回。我在用jQuery.form插件,特别是 .ajaxSubmit(options) 打电话提交表格。有几个级别的包装器div,但我调试按钮。单击绑定,我不明白为什么第二次,即使有相同的变量,它会做一个完整的文章,而我的部分视图会返回到一个全新的页面上。

在这里, 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 元素是不在表单内部,这就是为什么我必须这样绑定submit事件。我的局部视图只返回窗体而不返回按钮(它们是动态的)

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

/CSR/Home/CSR? 所有这些都是从这里开始的。就像表单失去了动作属性。我的事件是不是有点交叉?

3 回复 | 直到 14 年前

Fenton 14 年前

您可以使用jQuery的live()事件绑定,而不是绑定到click事件,它在AJAX加载后仍然有效。您可以通过替换:

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

与

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

Robert Koritnik 14 年前

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

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

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

Ulises 12 年前

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

@Sohnee的答案是可行的: live() 做这个工作。然而,它一直 deprecated . 它应该被替换为 on

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