Использование обработчика Ajax jQuery с формой, отправленной событием checkbox ‘onchanged’

#jquery

#jquery

Вопрос:

Я пытаюсь преобразовать отправку формы в Ajax jQuery. Страница содержит таблицу — каждая строка имеет форму с флажком, куда свойство onchanged отправляет форму:

 <input type="checkbox" value="" onchange="this.form.submit();"/>
  

Поскольку я хочу перенаправить любую из форм через обработчик Ajax jQuery, я использую шаблон, который я видел во множестве примеров использования:

         $("form").live('submit', function (event) {
            alert("hit ajax");
            event.preventDefault();
            var form = $(this);
            $.ajax({
                url: form.attr('action'),
                type: "POST",
                data: form.serialize(),
                success: function (data) {
                    $("#myContainer").html(data);
                },
            });
        });
  

Однако приведенный выше блок кода никогда не выполняется — форма отправляется таким же образом, как и раньше. Firebug не сообщает ни о каких ошибках — другие функции jQuery на странице работают.

спасибо

Ответ №1:

Также поместите прослушиватель событий в jQuery:

HTML:

 <input type="checkbox" id="myCheckbox" />
  

jQuery:

 $('#myCheckbox').change(function(){
    $('#myForm').submit();
});
  

Кроме того, IE не будет хорошо работать с этой конечной запятой в вашем примере:

         success: function (data) {
            $("#myContainer").html(data);
        }, // <-- This guy
  

Комментарии:

1. Имеет смысл — за исключением того, что я работаю с флажками ‘без возможности идентификации’. Несколько строк в таблице — каждая строка с формой / флажком. Поэтому, какие бы изменения checkbox ни изменились, необходимо каким-то образом передать родительскую форму.

2. $(':checkbox').change({function(){$(this).parent('form').submit();});

Ответ №2:

Вместо этого используйте:

 $("form input:checkbox").live('click', function (event) {
  

(переопределяет обработчики щелчков всех флажков на странице) и добавьте это в нижнюю часть исходного блока кода:

 this.form.submit();