Ajax submit делает полный пост после первой отправки

Question

Первая отправка работает, как и ожидалось, но в следующий раз она будет полностью отправлена ​​обратно.Я использую плагин jQuery.form, а именно вызов .ajaxSubmit(options) для отправки формы.Существует несколько уровней div-обертки, но я отлаживаю связывание button.click и не могу понять, почему во второй раз, даже с теми же переменными, он делает полный пост, а мой частичный вид возвращается на совершенно новомpage.

здесь, 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 как таковое.Мое частичное представление возвращает только форму, а не кнопки (они являются динамическими)

, здесь .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 ипоэтому во второй раз он выполнит полный пост.Чтобы это работало, вам нужно заново присоединить событие 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

Вместо привязки к событию click вы можете использовать привязку события liveQ (jQuery), которая сохраняется после загрузки AJAX.Вы можете сделать это, заменив:

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

на

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

Answer 3

Я знаю, что это старый вопрос, но я просто хотел добавить свои 2 цента.

@ Ответ Сони сработает: live() делает свою работу.Тем не менее, он был устарел .Его следует заменить на on:

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