Question

96

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

rated 0 times [ 97] [ 1] / answers: 1 / hits: 18622 / 8 Years ago, tue, november 15, 2016, 12:00:00

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

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

This listens for click events on all DOM elements with the class .foo.
However, this also listens for any eventual elements added to the DOM later, so it is not equal to:

var elements = document.getElementsByClassName('foo');

for (var element in elements) {

  element.addEventListener('click', function() { /* ... */ });

}

How do I do this in plain JavaScript? Am I supposed to use a MutationObserver? If so, then how? If not, then what?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josuea

Add To Favorites

Follow

Total Points: 609

Total Questions: 121

Total Answers: 104

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

josuea questions

1 POST http://localhost:3000/undefined/post 404 (Not Found)

Tue, Mar 2, 21, 00:00, 3 Years ago

1 React Warning: Each child in a list should have a unique key prop. in render() function

Mon, May 18, 20, 00:00, 4 Years ago

1 Why is asdf.replace(/.*/g, x) == xx?

Fri, Apr 17, 20, 00:00, 4 Years ago

1 how can i get value of moment format date picker in format (YYYY-MM-DD)

Tue, Dec 10, 19, 00:00, 5 Years ago

1 SyntaxError: Unexpected token in Gulpfile.js

Fri, Sep 27, 19, 00:00, 5 Years ago

View All

answered 8 Years ago larrycodys · Accepted Answer

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>