Создание навигации с JQuery и AJAX

Question

навигации (стилизованного с Bootstrap 4) просто Ли элементы и уль контейнер ждет AJAX является

<ul class="nav nav-pills lead" id="navitems"></ul> 

Создание первоначального списка нав с двумя статическими (не JSON) элементы с JQuery .html:

$("#navitems").html(' 
<li class="nav-item"><a class="nav-link pcl" href="#" id="load_page1">Nav Link 1</a></li> 
<li class="nav-item"><a class="nav-link pcl" href="#" id="load_page2">Nav Link 2</a></li> 
'); 

Добавление дополнительных элементов с JSON/AJAX

$.getJSON(cfcJSON+'&asite='+asite+'&apost='+apost+'&asort='+asort,  
    function(data) { 
    $.each(data.DATA.NAVITEMS, function(i,navitems){ 
     $('#navitems').append(navitems); 
     return false; // all li items in one string 
    }); 
}); 

Codepenhttp://codepen.io/xsmobi/pen/MbpxbE (важно: не используется HTTPS)

Чтобы быть уверенным, что это не связано с Codepen, я принимала страницу здесь тоже https://www.bitballoon.com/sites/testing-ajax-navigation

В оба случая

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

Это on.click функция, она работает для не-getJSON ссылки

pdx = 0; 
$('.pcl').click(function() { 
console.log("clicked in doc ready slogan"); 
pdxx = pdx; 
pdx = this.id; 
$(".pcl").removeClass('active'); 
$("#"+pdx).addClass('active'); 
pdx = pdx.replace("load_", ""); 
console.log("Nav li clicked with anchor text ...: " + pdx + "!") 
}); 

Пробовал Need assistance with jquery and ajax и завернули on.Click в документе готовности (вложено в основном документе готов), но это не помогает

Answer 1

события щелчка мыши вы написали для .pcl элемента не прикрепление с динамическими элементами, то есть элементы через ajax или после DOM load, так как click event будет выполнен с прикреплением событий до того, как ваши элементы будут добавлены в DOM. Итак, что вам нужно здесь event delegation. Вы можете попробовать прикрепление событие с document, ориентации конкретного класса $(document).on('click','.pcl',function() { вместо $('.pcl').click(function(){

Таким образом, ваш обновленный код будет выглядеть:

$(document).on('click','.pcl',function() { 
    console.log("clicked in doc ready slogan"); 
    pdxx = pdx; 
    pdx = this.id; 
    $('.pcl').removeClass('active'); 
    $("#"+pdx).addClass('active'); 
    pdx = pdx.replace("load_", ""); 
    console.log("Nav li clicked with anchor text ...: " + pdx + "!") 
}); 

и вот Updated pen