Событие клика jQuery срабатывает один раз

Question

Я немного новичок в jQuery, так что это может быть глупый вопрос ... Моя проблема в том, что у меня есть событие click, которое срабатывает, когда я нажимаю любую кнопку с классом ajax-submit. Я пытаюсь создать простую многостраничную форму с использованием ajax. Он отлично работает на первом шаге, но во второй раз, когда я нажимаю кнопку с классом ajax-submit, он не будет работать.

Вот код, который я использую для отправки формы AJAX:

$(document).ready(function() {
$(".ajax-submit").click(function() {
var form_data = $('#unlockForm').serialize();
        $('.ajaxgif').removeClass('hide');
$.ajax({
type: "POST",
url: "formprocess.php",
data: form_data,
success: function(respuesta) {
    $('.ajaxgif').hide();
    $('#process-container').html(respuesta);
},
error: function() {
    $('.ajaxgif').hide();
    alert("Error! Please try again");
}
});
return false;
  });
});

А коды форм просто такие

<form name="unlockForm" id="unlockForm" method="post">
      <input type="text" onFocus="if(this.value=='Introduce IMEI') this.value=''" value="Introduce IMEI" onBlur="if(this.value=='') this.value='Introduce IMEI';" name="imei" class="textbox part1" id="imei">
    <input type="button" class="ajax-submit inputbutton part1" value="Next" name="simple" id="next-imei">
    </form>

В обеих формах кнопки имеют класс ajax-submit, я проверил, и у меня нет ошибок опечаток, вы можете спросить, почему я не использую кнопки submit, ну, я пытался, но я не понял как правильно управлять событием отправки, он продолжал пополнять страницу.

Answer 1

Событие click не прикреплено к новым .ajax-submit элементам.
Для этого вам нужно будет использовать событие делегата, например, on или delegate.

$("#process-container").on('click','.ajax-submit',function() {
    var form_data = $('#unlockForm').serialize();
    $('.ajaxgif').show(); 
    // I think you didn't really meant: $('.ajaxgif').removeClass('hide');
    $.ajax({
        type: "POST",
        url: "formprocess.php",
        data: form_data,
        success: function(respuesta) {
            $('.ajaxgif').hide();
            $('#process-container').html(respuesta);
        },
        error: function() {
            $('.ajaxgif').hide();
            alert("Error! Please try again");
        }
    });
    return false;
});

Таблица функций делегатов событий:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

on Полезно Документы :

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

Когда предоставляется селектор, обработчик события называется делегированы. Обработчик не вызывается, когда событие происходит непосредственно в связанный элемент, но только для потомков (внутренних элементов), которые сопоставить селектор. JQuery пузыриет событие от цели события вверх к элементу, к которому прикреплен обработчик (т.е. внешний элемент) и запускает обработчик для любых элементов, путь, соответствующий селектору.

Обработчики событий привязываются только к выбранным в данный момент элементам; Oни должен существовать на странице в тот момент, когда ваш код вызывает .on (). Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните событие привязка внутри обработчика готовых документов для элементов, которые находятся в HTML-разметка на странице. Если новый HTML вводится на страницу, выберите элементы и прикрепите обработчики событий после того, как новый HTML размещены на странице. Или используйте делегированные события, чтобы прикрепить событие обработчик, как описано далее.

Делегированные события имеют то преимущество, что они могут обрабатывать события из элементы-потомки, которые добавляются в документ позднее. От выбрать элемент, который гарантированно будет присутствовать во время делегированный обработчик событий прикреплен, вы можете использовать делегированные события для Избегайте необходимости часто подключать и удалять обработчики событий. это элемент может быть контейнерным элементом представления в Дизайн Model-View-Controller, например, или документ, если событие Обработчик хочет отслеживать все всплывающие события в документе. элемент документа доступен в заголовке документа до загружая любой другой HTML-код, поэтому безопасно прикреплять туда события без в ожидании готовности документа.