jQuery - форма публикации, загруженная с другой страницы с использованием AJAX

Question

Я пытаюсь использовать JQuery для отправки формы без перезагрузки страницы. Хотя это хорошо работает с плагином jQuery Form на отдельной странице, мне нужно, чтобы он работал на странице, которую я загрузил с помощью AJAX.

<script type="text/javascript"> 
  $('#LoadForm').click(function() {
    $('#formDiv1').load('FormGen.asp');
  });
</script>

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

<script type="text/javascript"> 
 // wait for the DOM to be loaded 
 $(document).ready(function() { 
   // bind 'myForm' and provide a simple callback function 
   $('#myForm').ajaxForm(function() { 
      alert("Thank you for your comment!"); 
   }); 
 }); 
</script> 

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

Answer 1

Когда ваша страница загружается, элемент #myForm еще не существует на странице (потому что вы загружаете с помощью ajax), поэтому плагин ajaxForm() не инициализирован.

Вы должны инициализировать его, когда ваш ajax-контент успешно загружен. Для этого используйте параметр обратного вызова метода .load () , который выполняется при загрузке:

$('#formDiv1').load('FormGen.asp', function(data, status, xhr) {

    // this is executed when the load has finished
    $('#myForm').ajaxForm(function() { 
        alert("Thank you for your comment!"); 
    }); 

});

Answer 2

ОБНОВЛЕНИЕ:

eerrrr ... мой плохой, неправильно прочитал вопрос - ответ Дидье Гиса кажется более подходящим.

---

click() привязывает обработчик события к событию JavaScript «click».Привязка выполняется при выполнении сценария.

Поскольку вы загружаете форму тура с помощью ajax, я предполагаю, что функция click() вызывается до загрузки формы, и, следовательно, привязка отсутствует.

Попробуйте использовать функцию live() :

  $('#LoadForm').live("click", function() {
     $('#formDiv1').load('FormGen.asp');
  });

Answer 3

Вам нужно использовать метод on() для привязки к вещам, загружаемым AJAX - http://api.jquery.com/on/