Capturing events in dynamically generated HTML

Question

I'm trying to bind an event to a piece of HTML using pure JavaScript. This is very easy when using jQuery:

$( '#item-wrapper' ).on( 'click', '.item', function () { // code here} );

Normally a user binds an action to a single element. However in my case, I need to bind an event to an entire HTML block ( the .item ). I will have random number of .item inserted into the #item-wrapper and I want to be able to capture a click on an individual .item no matter which area of that .item is clicked.

Here's what I'm using right now:

document.getElementById( '#item-wrapper' ).addEventListener( 'click', event => {
    if ( event.target && event.path ) {
        
        let itemIndex = event.path.findIndex( element => {
            if ( element.classList ) {
                return element.classList.contains( '.item' );
            }
        } );

        if ( -1 < itemIndex ) {
            // Perform actions here
        }
    }
} );

This works just fine, but I'm wondering if this is the right way to do it. I tried enabling capturing, but it's not working as the main event is registered on the #item-wrapper, and the .item are inside this block.

Is there anything I'm missing here?

could this answer your question ? https://stackoverflow.com/questions/19655189/javascript-click-event-listener-on-class — Yoann Maingon, Oct 23 '21 at 19:25
The issue is not getting them by class, the issue is that the elements are dynamic. This will be very easy with static HTML items. — Johansson, Oct 23 '21 at 20:38
Oh sorry didn't catch that. Then it's either your method or as mentioned by Matriarx you'd need to register the event on each newly added element. — Yoann Maingon, Oct 25 '21 at 08:25

score 0 · Answer 1 · answered Oct 23 '21 at 19:59

0

const elements = document.getElementsByClassName('item')

if (elements.length > 0) {
  elements.forEach((element) => {
    element.addEventListener('click', () => {
      // actions here
    }
  }
}

answered Oct 23 '21 at 19:59

This is not going to work. The items are being added manually, and unless you run this code each time something is added to the document, the new elements won't be registered. – Johansson Oct 23 '21 at 20:37
In that case add the event each time a new element is created along with the element. Create a reusable function and call it each time you create a new element. The problem with what you're doing is that if you have a child inside that item and you click on that child, the event.target will not contain .item since .item will be its parent and it will not execute the event. It's also slow for the UI since it will have to iterate over every item every single time any item is clicked. But if it's not many items I guess it doesn't matter. – Oct 23 '21 at 20:43

Capturing events in dynamically generated HTML

1 Answers1