与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