Поведение формы по умолчанию после jQuery forms.js ajaxSubmit выполняет

Question

Я использую плагин формы jQuery для привязки событий отправки для двух форм на одной странице, чтобы они были представлены для разделения PHP-скриптов, которые возвращают разметку для разделения div на страница.

Одна из форм освежает следующий. Я использую «жить», так что каждый вид имеет свои события вновь переплет, когда он обновляется:

$(document).ready(function() { 
    /* Form 1 */ 
    $('#frmSearch').live('submit', function() { 
     $(this).ajaxSubmit({ 
      target: '#divResults', 
      url: 'search_div.php' 
     }); 
     return false; 
    }); 
    /* Form 2 */ 
    $('#frmResults').live('submit', function() { 
     $(this).ajaxSubmit({ 
      target: '#divLookup', 
      url: 'lookup_div.php', 
     }); 
     return false; 
    }); 
}); 

До сих пор так хорошо. Каждая форма может быть представлена ​​снова и снова с помощью ajax, и все привязки переходят от одного представления к другому.

Проблема возникает, когда я пытаюсь связать третью форму и запустить его отправить событие в опции «успех» второй формы:

/* Form 2 */ 
$('#frmResults').live('submit', function() { 
    $(this).ajaxSubmit({ 
     target: '#divLookup', 
     url: 'lookup_div.php', 
     success: function(responseText){ 
      $('#frmLookup').submit(); 
     } 
    }); 
    return false; 
}); 
/* Form 3 */ 
$('#frmLookup').live('submit', function() { 
    $(this).ajaxSubmit({ 
     target: '#divMappings', 
     url: 'mapped_items_div.php', 
    }); 
    return false; 
}); 

Когда я делаю это, ajaxSubmit успешно выполняет, но тогда также выполняется попытка отправки формы по умолчанию, что приводит к перезагрузке страницы. Обратите внимание, что я включаю «return false»; для подавления заявки по умолчанию для формы, но по какой-либо причине она все равно подчиняется.

Я обнаружил, что если я «привяжу» к событию «отправить» формы 3 в функции успеха формы 2 с теми же параметрами, что и «живые» для формы 3, отправка по умолчанию формы не выполняется. Однако это избыточно, и если я могу, я бы хотел избежать этого.

Как я могу подавить поведение формы 3 по умолчанию?

Answer 1

Спасибо, crescentfresh, для получения меня на верном пути. Для моего решения я модифицировал свои сценарии для печати только элементов, вложенных в формы, в отличие от самих форм и их содержимого. Затем я изменил «цель» каждой формы на следующую форму, а не на div, содержащий следующую форму. Это устраняет необходимость повторного связывания события submit для каждой формы, поскольку функция ajax из предыдущей формы просто заменяет свои внутренние элементы, а не «обновляет» их вообще.

Я также решил, что было бы целесообразно покончить с плагином формы и просто использовать «.serialize()» вместе с «.ajax», как показано Паоло Бергантино here.

Мой окончательный продукт выглядит примерно так:

/* Form 1 */ 
$('#frmSearch').bind('submit', function() { 
    var formdata = $(this).serialize(); 
    $.ajax({ 
     url: 'result_form.php', 
     data: formdata, 
     success: function(responseText){ 
      $('#frmResults').html(responseText); 
     } 
    }); 
    return false; 
}); 

/* Form 2 */ 
$('#frmResults').bind('submit', function() { 
    var formdata = $(this).serialize(); 
    $.ajax({ 
     url: 'lookup_div.php', 
     data: formdata, 
     success: function(responseText){ 
      $('#frmLookup').html(responseText); 
      $('#frmLookup').trigger('submit'); 
     } 
    }); 
    return false; 
}); 

/* Form 3 */ 
$('#frmLookup').bind('submit', function() { 
    var formdata = $(this).serialize(); 
    $.ajax({ 
     url: 'mapped_items_div.php', 
     data: formdata, 
     success: function(responseText){ 
      $('#divMappings').html(responseText); 
     } 
    }); 
    return false; 
}); 

Answer 2

Я знаю, что это должно быть то же самое, но так как это кажется очень странным поведением, я хотел бы попробовать заменить

$('#frmLookup').submit(); 

для

$('#frmLookup').trigger('submit'); 

, чтобы увидеть, если это меняет что-нибудь?

Answer 3

Не уверен, если это связано с вашей проблемой, но live() does not support the "submit" event:

В настоящее время не поддерживается: blur, focus, mouseenter, mouseleave, change, submit