Создание формы динамически

Question

Я использую кнопку поиска, которая динамически создает форму на стороне сервера и возвращает ее с синтаксисом Jquery. После того, как я заполнил форму и нажал кнопку отправки, появилась другая функция Jquery .submit (), которая должна вызываться для проверки ввода перед отправкой данных на сервер. Но, по какой-то причине, эта функция никогда не вызывается, а данные запроса отправляются. Более подробно:

Это форма, которую кнопка serach динамически создает на стороне сервера и "печатает" на html-странице с помощью Jquery:

<form action=... name="stockbuyform" class="stockbuyform" method="post">
<input type=text value="Insert purchasing amount">
<input type="submit" value="Click to purchase">
</form>

А вот функция .submit ():

$(".stockbuyform").submit(function() {
    alert("Need to validate purchasing details");
}

Но когда я нажимаю кнопку покупки, функция .submit () никогда не вызывается. Означает ли это, что я не могу использовать другой вызов Jquery с ответом, который я получил при первом вызове?

Answer 1

Использовать делегирование события ( live или делегат ). live, вероятно, наиболее подходит для этой ситуации:

$(".stockbuyform").live("submit", function() { 
    alert("Need to validate purchasing details"); 
});

Что делает живое (из руководства ):

Прикрепить обработчик к событию для всех элементы, которые соответствуют текущему селектор, сейчас или в будущем.

так что вам не нужно беспокоиться о том, что замененные ajax-элементы теряют свои связанные обработчики событий. Кроме того, убедитесь, что вы вернули false из вашего обработчика отправки, чтобы предотвратить возникновение не XHR GET / POST.

Answer 2

Я так понимаю, что поиск является запросом AJAX.Вам нужно будет связать действие отправки формы после завершения AJAX:

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    $('#target').submit(function() {
      alert('Handler for .submit() called.');
      return false;
    });
  }
});

Некоторые события могут быть связаны с текущими и будущими элементами с помощью .live () http://api.jquery.com/live/:

$('.button').live('click', function() {
  // do something.
});

.live () имеет некоторые ограничения (см. связанную документацию):

• Он не работает с нативными элементами DOM, поэтому $ ('table'). live ('click', function () {});не будет работать.
• Он не может быть связан как $ ('. somediv'). next (). live ('click', function () {});не будет работать.

Метод .delegate () должен ослабить эти ограничения, но я понимаю, что он имеет свои собственные ограничения.Я на самом деле еще не использовал это ... не нужно.Из документации:

Делегат - это альтернатива использованию метода .live (), который допускает каждую привязку делегирования события к определенным элементам DOM.

Вы также можетесвязать новые события в функциях успеха / ошибки / завершения AJAX в JQuery:

$.ajax({
  url: 'something.html',
  success: function(data) {
    //add new elements with data.
    //bind new events to elements
  }
});