Question

导航（使用Bootstrap 4设置样式）只是 li elements ，等待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将通过附加完成元素附加到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

使用jQuery和AJAX创建导航

1 个答案: