JQuery формы плагин. Проблемы при отправке загруженной формы

Question

Я использую плагин jquery form для субмиформ на моей странице, и он прекрасно работает.

Но когда я пытаюсь отправить форму, загруженную с помощью .load, она не работает.

Это мой код:

$(document).ready(function() {                 
  //shows loading screen whilst posting via ajax
  $().ajaxStart($.blockUI).ajaxStop($.unblockUI);

  //post form add_customer ajax
  var options = { 
    target: '#alert',   
  };
  $.ajaxSettings.cache = false;
  $('#add_customer').submit(function() {
    $(this).ajaxSubmit(options);
    return false;
  }); 

  $('#theform').hide().load('form.php', function() {
    $(this).fadeIn();
    return false;
  });
});

Чего мне не хватает? нигде не могу найти решение.

Answer 1

Если у вас есть код javascript в файле form.php, и вы получите его с помощью $.load(), тогда весь код js будет удален, и вы получите только часть HTML.

Используйте $.get для загрузки всей страницы, включая код js.

$.get('form.php',
      {},
      function(data){
        $('#theform').html(data).fadeIn();
      });

Теперь весь код js в form.php будет работать после его загрузки и добавления в область #theform.

Answer 2

Является ли форма с идентификатором add_customer внутри HTML-кода, загруженного из form.php? В этом случае применяемая привязка метода submit происходит до того, как элемент становится доступным. Чтобы исправить это, переместите привязку метода внутри обратного вызова load:

$(document).ready(function() {                 
  //shows loading screen whilst posting via ajax
  $().ajaxStart($.blockUI).ajaxStop($.unblockUI);

  $('#theform').hide().load('form.php', function() {
    //post form add_customer ajax
    var options = { 
      target: '#alert',   
    };
    $.ajaxSettings.cache = false;
    $('#add_customer').submit(function() {
      $(this).ajaxSubmit(options);
      return false;
    }); 

    $(this).fadeIn();
    return false;
  });
});