0

I've got two javascripts on a page:

One is a script that gets some JSON from a server and then builds out some navigation markup and writes it to a div.

The other is a script that does something on click of one of the nav items.

So basically, 

document.getElementById("writeNav").innerHTML += writeNav;

would replace: 

<ul id="writeNav" class="navbar-nav mr-auto">
 <li class="nav-item"> <a class="nav-link" href="#"><span>Home</span></a> </li>    
</ul>

with:

<ul id="writeNav" class="navbar-nav mr-auto">
 <li class="nav-item"> <a class="nav-link" href="#"><span>Home</span></a> </li>   
 <li class="nav-item "> <a id="undefined" class="nav-link" href="#"><span>link 1</span></a></li>
 <li class="nav-item "> <a id="undefined" class="nav-link" href="#"><span>link 2</span></a></li>
</ul>

The Jquery, for the purpose of troubleshooting, would just launch an alert onClick of any of the ".nav-item" classes.

<script>
    $(document).ready(function(){
        $('.nav-link').click(function(){
            alert('click function was called.'); 
        });
    });
</script>

If I comment out the "getElementById" line and click "home" it triggers the alert. If I don't comment it out, and click "home", it does not trigger the alert.

Why? What am I doing wrong?

Stephen Hoydis
  • 29
  • 6
  • 1
    well are you adding the items before or after you bind the event? If you overrwrite innerHTML it unbinds everything. You basically erase a whiteboard and have to write everything again. – epascarello May 01 '20 at 20:41
  • I'm doing '''document.getElementById("writeNav").innerHTML += writeNav;''' in the window.onload = function(). The jquery is in a different script, introduced below it. ( $(document).ready(function(){ $('.nav-link').click(function(){ alert('click function was called.'); $('.nav-link').removeClass("active"); $(this).addClass("active"); }); });) – Stephen Hoydis May 01 '20 at 21:08
  • 1
    Rule of thumb: never use `innerHTML +=`. With jQuery, there’s even an easy alternative: `$("#writeNav").append(writeNav)`. – Ry- May 01 '20 at 21:15
  • Oh cool. Thanks Ry, that's definitely way easier. But I'm still having the conflict. for some reason the jQuery in the .click() function still doesn't work on the items that are written with the 'append'. – Stephen Hoydis May 04 '20 at 16:29

1 Answers1

0

You can try to use appendChild method. Appending the elements directly with += operator probably affecting all the elements and their defined behavior under the <ul> element.

https://www.w3schools.com/jsref/met_node_appendchild.asp

let elementToAdd = // 
document.getElementById("writeNav").appendChild(elementToAdd);
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Anıl
  • 54
  • 1
  • 8
  • Thanks. This lets me add all the elements, but I'm having trouble getting the classes on them in a nested structure or adding the href to the A element. (ie:
  • text
    • ) – Stephen Hoydis May 04 '20 at 16:33
  • I couldn't understand your problem exactly. Can you enlighten me if the following answer won't help you. var item = document.getElementById("id of the element"); item.classList(); // returns you the classes of the element item.setAttribute("class", "something"); // sets an attribute item.setAttribute("href", "#"); item.setAttribute("disabled", ""); // You can also set attributes like disabled this It is up to you to create the algorithm that you need. You can try the dev console to test your code. Lastly you can check websites like w3schools for tutorials. – Anıl May 05 '20 at 06:48