Скорее всего, элементы, к которым вы пытаетесь привязать события, еще не были добавлены в разметку к тому времени, когда вы выполняете привязку.
Чтобы исправить это, вы должны перенести на любого предка элементы, которые существуют на странице во время выполнения сценария.
Например:
$('.sidebar-header').on('click', 'li.nf-next-item', function(){
$(".step-1").removeClass('displayBlock').addClass('displayNone');
$(".step-2").removeClass('displayNone').addClass('displayBlock');
})
Вы также можете обернуть весь код в функцию, проверить, существует ли элемент, к которому вы привязываетесь, и, если нет, подождать некоторое время и запуститьфункционировать снова.Пример:
function binderCallback() {
$(".step-1").removeClass('displayBlock').addClass('displayNone');
$(".step-2").removeClass('displayNone').addClass('displayBlock');
}
function scriptBinder() {
if ($('.sidebar-header').is('.sidebar-header')) {
$('.sidebar-header').on('click', 'li.nf-next-item', binderCallback);
} else {
setTimeout(() => {scriptBinder()}, 1000);
}
}
$(() => { scriptBinder() });
Однако эта конструкция потенциально опасна и ее следует избегать, так как если по какой-либо причине ожидаемый элемент никогда не добавляется на страницу, ваш скрипт будет продолжать называть себя вечно,Одна из мер безопасности заключается в том, чтобы поместить в функцию итератор и позволить ему вызывать себя конечное число раз.Пример, который прекращает попытки связывания после 10 попыток, сделанных с интервалом в 1 секунду:
let binderCounter = 0,
binderCallback = function() {
$(".step-1").removeClass('displayBlock').addClass('displayNone');
$(".step-2").removeClass('displayNone').addClass('displayBlock');
};
function scriptBinder() {
if ($('.sidebar-header').is('.sidebar-header')) {
$('.sidebar-header').on('click', 'li.nf-next-item', binderCallback);
} else {
if (binderCounter++ < 10)
setTimeout(() => {scriptBinder()}, 1000);
}
}
$(() => { scriptBinder() });
Другая альтернатива вышеприведенному - привязка к элементу, который, как вы уверены, существует, когда вы делаете привязку.Например, <body>:
$('body').on('click', 'li.nf-next-item', function(){
$(".step-1").removeClass('displayBlock').addClass('displayNone');
$(".step-2").removeClass('displayNone').addClass('displayBlock');
})
Хотя вышеприведенное, безусловно, будет работать (если, конечно, ваш li.nf-next-item верен), он меньше оптимального.
Как указано в их документация :
Присоединение множества делегированных обработчиков событий в верхней части дерева документа может снизить производительность.Каждый раз, когда происходит событие, jQuery должен сравнивать все селекторы всех прикрепленных событий этого типа с каждым элементом в пути от цели события до верхней части документа.Для лучшей производительности прикрепляйте делегированные события в месте расположения документа как можно ближе к целевым элементам.Избегайте чрезмерного использования document или document.body для делегированных событий в больших документах.