Tree View using list item but the click event is not working for dynamically created HTML Content

Question

In the below the html element are rendered statically when those html contents rendered dynamically the click event is not yet working.

var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

/* Remove default bullets */
ul, .myUL {
  list-style-type: none;
}

/* Remove margins and padding from the parent ul */
.myUL {
  margin: 0;
  padding: 0;
}

/* Style the caret/arrow */
.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}
<pre><code>
/* Hide the nested list */
.nested {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}

<ul id="myUL">
  <li><span class="caret">Beverages</span>
    <ul class="nested">
      <li>Water</li>
      <li>Coffee</li>
      <li><span class="caret">Tea</span>
        <ul class="nested">
          <li>Black Tea</li>
          <li>White Tea</li>
          <li><span class="caret">Green Tea</span>
            <ul class="nested">
              <li>Sencha</li>
              <li>Gyokuro</li>
              <li>Matcha</li>
              <li>Pi Lo Chun</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

If & when you are rendering some elements dynamically in the DOM, if you want them to respond to the click, you have to apply your `addEventListener` on this new item once it is created. Something like `var e = document.createElement("...");` `e.addEventListener("click", function() { ... });` `document.body.appendChild(e); ` — robinvrd, Dec 17 '19 at 08:46
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — theiNaD, Dec 17 '19 at 08:46

score 1 · Accepted Answer · answered Dec 17 '19 at 08:48

The problem with your event listener is that it will not work on dynamically created content. It is bound to elements that exist only when the event listener is first added.

You could instead capture events from the document and then handle these if they match your element selector:

document.addEventListener('click', function(e) {
    if(e.target && e.target.classList.contains('caret')) {
        e.target.parentElement.querySelector(".nested").classList.toggle("active");
        e.target.classList.toggle("caret-down");
    }
});

score 0 · Answer 2 · answered Dec 17 '19 at 08:51

0

The problem will be fixed with remove <pre><code> in your css code.

answered Dec 17 '19 at 08:51

Mohammad Abedi

495
2
7

Tree View using list item but the click event is not working for dynamically created HTML Content

2 Answers2