After updating the INNERHTML, the NAV tag content is no longer functional

Question

After updating the INNERHTML, the NAV tag content is no longer functional

I am facing an issue with replacing the contents of a NAV tag that contains UL list items. The original HTML within the NAV tag works perfectly fine, but when I replace it with my own HTML - which matches the original word for word - the dropdown functionality of the NAV stops working. I have meticulously compared every letter and word between the two versions. One thing I did notice is that one of the anchor HREF attributes contains a '#'. Here is the original code inside the NAV:

<nav id="nav">
<ul>
<li class="current"><a href="index.html">Welcome</a></li>
<li class="submenu">
<a href="#">Show Me</a>
<ul>
<li><a href="hybrid/index.html">The Hybrid</a></li>
</ul>
</li>
</ul>
</nav>

My code looks like this:

var pstrHTML = "<ul>"
+ "<li class='current'><a href='index.html'>Welcome</a></li>"
+ "<li class='submenu'>"
+ "<a href='#'>Show Me</a>"
+ "<ul>"
+ "<li><a href='hybrid/index.html'>The Hybrid</a></li>"
+ "</ul>"
+ "</li>"
+ "</ul>";
document.getElementById("nav").innerHTML = pstrHTML;

Although I have added an ONCLICK event with a WINDOW.ALERT to the "Show Me" list item, confirming that the INNERHTML replacement is functioning correctly on page load, the NAV is still not behaving as expected in comparison to the original HTML.

javascript css innerhtml nav

Answer 1

Answer №1

When removing the element, any event bound to it will also be removed.

To ensure the event remains active, you can bind it to the document instead of the specific element using document.AddEventListener(). Then, check if the target contains the id #ShowMe.

document.AddEventListener("click",function(e) {
   if(e.target = "#idOfYourElement"){
      // do something
   }
});

View a working demo below;

document.getElementById("nav").addEventListener("click", function(e) {
  if (e.target = "#ShowMe") {
    alert("Hello World!");
    var pstrHTML = "<ul>" +
      "<li class='current'><a href='index.html'>Welcome</a></li>" +
      "<li class='submenu'>" +
      "<a id='ShowMe' href='#'>Show Me</a>" +
      "<ul>" +
      "<li><a href='hybrid/index.html'>The Hybrid</a></li>" +
      "<li><a href='hybrid/index.html'>New Element 1</a></li>" +
      "<li><a href='hybrid/index.html'>New Element 2</a></li>" +
      "</ul>" +
      "</li>" +
      "</ul>";
    document.getElementById("nav").innerHTML = pstrHTML;
  }
});

<nav id="nav">
  <ul>
    <li class="current"><a href="index.html">Welcome</a></li>
    <li class="submenu">
      <a id="ShowMe" href="#">Show Me</a>
      <ul>
        <li><a href="hybrid/index.html">The Hybrid</a></li>
      </ul>
    </li>
  </ul>
</nav>

document.AddEventListener() is similar to

$(document).on("action","#id",function(){ });

in jQuery.

UPDATE: Included Teemu's answer, which will also work;

document.getElementById("nav").addEventListener("click", function(e) {
  if (e.target = "#ShowMe") {
     // do something
  }
});

Answer 2

When removing the element, any event bound to it will also be removed.

To ensure the event remains active, you can bind it to the document instead of the specific element using document.AddEventListener(). Then, check if the target contains the id #ShowMe.

document.AddEventListener("click",function(e) {
   if(e.target = "#idOfYourElement"){
      // do something
   }
});

View a working demo below;

document.getElementById("nav").addEventListener("click", function(e) {
  if (e.target = "#ShowMe") {
    alert("Hello World!");
    var pstrHTML = "<ul>" +
      "<li class='current'><a href='index.html'>Welcome</a></li>" +
      "<li class='submenu'>" +
      "<a id='ShowMe' href='#'>Show Me</a>" +
      "<ul>" +
      "<li><a href='hybrid/index.html'>The Hybrid</a></li>" +
      "<li><a href='hybrid/index.html'>New Element 1</a></li>" +
      "<li><a href='hybrid/index.html'>New Element 2</a></li>" +
      "</ul>" +
      "</li>" +
      "</ul>";
    document.getElementById("nav").innerHTML = pstrHTML;
  }
});

<nav id="nav">
  <ul>
    <li class="current"><a href="index.html">Welcome</a></li>
    <li class="submenu">
      <a id="ShowMe" href="#">Show Me</a>
      <ul>
        <li><a href="hybrid/index.html">The Hybrid</a></li>
      </ul>
    </li>
  </ul>
</nav>

document.AddEventListener() is similar to

$(document).on("action","#id",function(){ });

in jQuery.

UPDATE: Included Teemu's answer, which will also work;

document.getElementById("nav").addEventListener("click", function(e) {
  if (e.target = "#ShowMe") {
     // do something
  }
});

After updating the INNERHTML, the NAV tag content is no longer functional

Answer №1

Similar questions

Font Awesome icons are preventing the navigation bar from collapsing

Identifying a particular pattern in a JavaScript string

How can I make multiple elements change color when hovering with CSS?

Background not covering full height despite setting HTML and body heights to 100%

If I dared to eliminate the emphasized line, this code would completely fall apart

Issue encountered while attempting to load several google charts simultaneously

What is the best way to initially hide a div using slide toggle and then reveal it upon clicking?

Initiate an "execute.document" command directly from the address bar

Click the link to capture the ID and store it in a variable

What is the best way to ensure the search box remains fixed in the top navigation bar while maintaining a fluid and responsive design?

Angular Material (8) error code S2591: The variable 'require' is not defined in the current scope

Troubleshooting EasyTabs: Localhost Issue with Ajax Tab Configurations

A step-by-step guide on masking (proxying) a WebSocket port

Tips for initializing the store in Vue when the application first starts

Animating content through CSS and jQuery to reveal its unfolding effect

What is the most optimal method for transforming this array of objects into a different format?

Utilizing jQuery to Calculate Tab Scores

JQuery form plugin experiencing issues with Ajax functionality

The function grunt.task.run() is malfunctioning

Transfer a term to a different division - JavaScript Object Model