Нажмите всегда первый вызов ajax

Question

Я пытаюсь сделать страницу с полем в три шага, и каждый шаг должен быть загружен ajax, шаги меняются после каждого нажатия кнопки «Далее». Я меняю класс кнопки для каждого шага, поэтому я могу загрузить следующий, не знаю, есть ли лучший метод. но когда я нажимаю, чтобы перейти ко второму этапу, я нахожу первый шаг.

 /**** THIS WORK FINE *****/ 
    // First Click on Next Button load first step 

    $('.next-button').on('click', function(){ 
     $('.first-step').load('includes/selecione-torcida.html'); 
     $('.next-button').addClass('next-torcida'); 
    }); 

    /**** THIS DON'T WORK *****/ 
    // Second Click on Next Button load second step but in the class "next-torcida" 

    $('.next-torcida').on('click', function(){ 
    $('.first-step').load('includes/selecione-amigos.html'); 
    }); 

Answer 1

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

Вы должны использовать delegated event handler так будет пузырь вновь добавленных элементов (или в данном случае класс вы присваиваете затем желая связываться с щелчком.

Вот пример того, как сделать он с делегацией:

// Direct event, is only bound to elements existing at DOM creation point 
$('.next-button').on('click', function(){ 
    $('.first-step').load('includes/selecione-torcida.html'); 
    $('.next-button').addClass('next-torcida'); 
}); 

// Delegated event, will listen for newly created elements too 
$(document).on('click', '.next-torcida', function(){ 
    $('.first-step').load('includes/selecione-amigos.html'); 
}); 

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

прямой путь является то, что Whe. n DOM загружается, обработчики событий присоединяются индивидуально к каждому элементу, который имеет класс .next-button, поэтому новые созданные элементы не будут иметь обработчика, и вам придется привязать новый обработчик событий при его создании.

Примечание: Я просто использовал document здесь в качестве примера, это довольно широкая, и это было бы хорошей идеей, чтобы сузить ее по соображениям производительности до ближайшего родителя, что все эти элементы разделяют.

Here's another post разъяснение различий между прямым и делегированным.