使用 jQuery 和 AJAX 创建导航

Question

导航（使用 Bootstrap 4 风格）只是 li 元素，而等待 AJAX 的 ul 容器是

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

使用 jQuery .html 创建一个包含两个静态（非 JSON）项目的初始导航列表：

$("#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   
    });
 });

Codepen http://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 将在您的元素附加到@ 之前完成附加事件987654328@。所以你需要 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