How can I convert jquery's on function to vanilla javascript?

Question

Here is my jquery code.

     $(document).on("click", ".eye", function () {
         if ($(this).hasClass('on')) {
             $(this).removeClass('on');
         } else {
             $(this).addClass('on')
         }
     });

I want to convert this function to vanilla javascript.

When I run document.querySlector('.eye') nothing is written to console.log. Because this object is dynamically created by javascript. So, I had no choice but to use jquery.

I was wondering how I can replace the above jquery with vanilla javascript.

Best Regards!

[addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) — admcfajn, Nov 24 '21 at 01:39
@admcfajn It might not be immediately obvious to beginners how to use `addEventListener` to set handlers for events on elements that do not yet exist, they way jQuery's `.on` does simply by adding an extra selector argument. — Amadan, Nov 24 '21 at 01:42
Does this answer your question? [Emulate jQuery "on" with selector in pure Javascript](https://stackoverflow.com/questions/14677019/emulate-jquery-on-with-selector-in-pure-javascript) — admcfajn, Nov 24 '21 at 01:51
Thanks @Amadan is there a reason you thought that I wouldn't understand that? Seems odd to me that you would need to mention it. I think it's kind of a given & I just didn't have time to elaborate so I thought I'd contribute as best I could with the time I had. — admcfajn, May 04 '22 at 23:21
I thought it likely that the _OP_ wouldn't understand that. It is not "a given" for a beginner. — Amadan, May 04 '22 at 23:33

ProDec · Accepted Answer · 2021-11-24T02:09:29.710

Something like this could work.

document.querySelector('#create').addEventListener('click', e => {
  document.querySelector('#container').innerHTML = '<div class="eye"></div>';
});

document.addEventListener("click", e => {
  if (e.target.matches('.eye')) {
    e.target.classList.toggle('on');
  }
});

.nose { padding: 50px; background-color: #eee; }
.eye { margin-top: 10px; padding: 50px; background-color: #eee; }

.on { background-color: red; }

<div id="other">
  <div class="nose"></div>
</div>
<div id="container">
</div>

<button id="create">Add</button>

Reference: EventTarget.addEventListener()

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Update:

to work with click event on nestest elements inside .eye, use closest() to lookup .eye

document.addEventListener("click", e => {
  const eye = e.target.closest('.eye');
  if (eye) {
    eye.classList.toggle('on');
  }
});

To clarify, the answer is just the bottom half of the code. The top half creates `div.eye` so that you can confirm the bottom half of the code works even though the element does not exist when the code is executed. — Amadan, Nov 24 '21 at 01:39
This will fail on nested elements. You have to make use of the `event.path` - as soon as a user would click on a button like `
` inside the `eye` it wouldn't trigger anymore because the target would be the button. — Christopher, Nov 24 '21 at 01:41

How can I convert jquery's on function to vanilla javascript?

1 Answers1