與jQuery和AJAX

Question

所述的導航（具有自舉4風格）創建導航是簡單地li元素並等待AJAX​​的UL容器是

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

創建具有初始NAV列表中的兩個靜態（非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連接的情況下，中$('.pcl').click(function(){

針對特定類$(document).on('click','.pcl',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