$(document).on() in plain JavaScript?

Question

In jQuery there is .on() which can be used as:

$(document).on(\'click\', \'.foo\', function() { /* ... */ });

This listens for click events on

Answer 1

That called event delegation, in the pure javascript you could attach the click event to the parent element then on click check if the clicked element match the target you want to click and perform the action you want ,like the example below :

document.getElementById("parent-item").addEventListener("click", function(e) {
      // e.target is the clicked element!
      // If it was an item with class 'foo'
      if(e.target && e.target.className == "foo") {
         console.log("foo "+e.target.innerText+" was clicked!");
    }
});

Hope this helps.

document.getElementById("parent-item").innerHTML += "<li class='foo'>Item 3</li>";

document.getElementById("parent-item").addEventListener("click", function(e) {
  if(e.target && e.target.className == "foo") {
    console.log("foo "+e.target.innerText+" was clicked!");
  }
});

<ul id="parent-item">
  <li class='foo'>Item 1</li>
  <li class='foo'>Item 2</li>
</ul>