Create Navigation with jQuery and AJAX

Question

The navigation (styled with Bootstrap 4) is simply li elements and the ul container waiting for AJAX is

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

Creating an initial nav list with two static (non JSON) items with 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>
');

Adding further items with 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 (important: not using https)

To be sure that is has not to do with Codepen, I hosted the page here, too https://www.bitballoon.com/sites/testing-ajax-navigation

In both cases

Building the navigation with jQuery works
Only those two test links created with ().html() are able to fire
Those created with AJAX aren't
Checking elements in developer tools: links look the same (see screenshot in the code)

This is the on.click function, it works for the non-getJSON links

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 + "!")
});

Tried Need assistance with jquery and ajax and wrapped the on.click in a doc ready (nested in the main document ready) but that does not help

Guruprasad J Rao · Accepted Answer · 2016-11-22 11:32:50Z

1

The click event you have written for .pcl element was not attaching with dynamic elements i.e. elements through ajax or after DOM load, since the click event would be done with attaching events before your elements get appended in DOM. So what you need here event delegation. You can try attaching the event with document, targeting specific class $(document).on('click','.pcl',function() { instead of $('.pcl').click(function(){

So your updated code would be as:

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

and here is the Updated pen

answered Nov 22, 2016 at 11:32

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eckard Ritter Over a year ago

Thanks a lot, Guruprasad, for your quick and complete help, all the more without blaming me for my lack of unterstanding. Once the project is running, I am going to add you to the list of coding angels.

Guruprasad J Rao Over a year ago

Anytime.. Happy coding.. :) In the mean time you can tick the right mark to the left of the answer, which means you accept the answer.. :)

Eckard Ritter Over a year ago

Of course, id did tick it, but SO responded that my ticks are not published as yet due to my low level so far. Howerer it's being counted, so you have the score. Added a link to your SO profile, it's in the comment to the respective Codepen

Collectives™ on Stack Overflow

Create Navigation with jQuery and AJAX

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related