Проблема с обработкой 2 форм ajax

silmarion

Полезный
Регистрация
21 Июн 2012
Сообщения
194
Реакции
19
Всем привет, подскажите в чем может быть проблема, 2 формы отрабатываются через аякс, первая форма нормально работает, вторая тупит.

Код:
<script>
    $(function(){
      $('#my_form').on('submit', function(e){
        e.preventDefault();
        var $that = $(this),
            fData = $that.serializeArray();
        $.ajax({
          url: $that.attr('action'),
          type: $that.attr('method'),
          data: {'action': 'get_random', form_data: fData},
          dataType: 'json',
          success: function(result){
        if (result.its_ok==1){
        $('div.random').html(result.res);
        $('div.get_link').html(result.res1);
        }
          }
        });
      });
    });

   $(function(){
      $('#f').on('submit', function(e){
        e.preventDefault();
        var $that = $(this),
            fData = $that.serializeArray();
        $.ajax({
          url: $that.attr('action'),
          type: $that.attr('method'),
          data: {'action': 'get_form_data', form_data: fData},
          dataType: 'json',
          success: function(result){
        if (result.its_ok==1){
                $('.link_form').hide();
        $('div.your_link').html(result.res1);
        }
          }
        });
      });
    });
 
Всем привет, подскажите в чем может быть проблема, 2 формы отрабатываются через аякс, первая форма нормально работает, вторая тупит.

Код:
<script>
    $(function(){
      $('#my_form').on('submit', function(e){
        e.preventDefault();
        var $that = $(this),
            fData = $that.serializeArray();
        $.ajax({
          url: $that.attr('action'),
          type: $that.attr('method'),
          data: {'action': 'get_random', form_data: fData},
          dataType: 'json',
          success: function(result){
        if (result.its_ok==1){
        $('div.random').html(result.res);
        $('div.get_link').html(result.res1);
        }
          }
        });
      });
    });

   $(function(){
      $('#f').on('submit', function(e){
        e.preventDefault();
        var $that = $(this),
            fData = $that.serializeArray();
        $.ajax({
          url: $that.attr('action'),
          type: $that.attr('method'),
          data: {'action': 'get_form_data', form_data: fData},
          dataType: 'json',
          success: function(result){
        if (result.its_ok==1){
                $('.link_form').hide();
        $('div.your_link').html(result.res1);
        }
          }
        });
      });
    });
что значит тупит?
 
Первая функция отправляет данные из формы 1, и помещает новую форму в див, вторая форма не обрабатывается второй функцией
 
jQuery работает с элементами, которые были на странице на момент инициализации кода.
Т.к. '#f' отсутствует в этот момент, событие игнорируется. Для корректной работы его нужно делегировать, например, родительскому элементу.
Вот мой рабочий пример:
Код:
        $(function(){
          $('#form1').on('submit', function(e){
            e.preventDefault();
            var $that = $(this);
            $.ajax({
              url: $that.attr('action'),
              type: $that.attr('method'),
              dataType: 'html',
              success: function(result){
                $("#result").append(result);
              }
            });
          });
          $('div#result').on('submit', "#form2" ,  function(e){
              e.preventDefault();
              alert("Success!");
          });
        });
 
Назад
Сверху