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

Тема в разделе "JavaScript", создана пользователем silmarion, 7 ноя 2015.

Модераторы: ZiX
  1. silmarion

    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. ZiX

    ZiX Коддинг, Парсинг

    Moderator
    Регистр.:
    9 июл 2011
    Сообщения:
    1.388
    Симпатии:
    576
    что значит тупит?
     
  3. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    Первая функция отправляет данные из формы 1, и помещает новую форму в див, вторая форма не обрабатывается второй функцией
     
  4. mad_boy

    mad_boy Писатель

    Регистр.:
    24 дек 2012
    Сообщения:
    8
    Симпатии:
    3
    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!");
              });
            });