Event Delegation / Attaching events to dynamically created elements using Vanilla JavaScript

Question

I am in the process of converting a large script from jQuery to JavaScript. This was code that I didn't write myself but that I forked from a project on GitHub.

I've consulted W3Schools, the official documentation and this website as a reference.

http://youmightnotneedjquery.com/

One of the parts I'm trying to convert into JavaScript is the following.

$('body').on('click','.vb',function(){
    exportVB(this.value);
});

According to the aforementioned link,

$(document).on(eventName, elementSelector, handler);

converts to this

document.addEventListener(eventName, function(e) {
    // loop parent nodes from the target to the delegation node
    for (var target = e.target; target && target != this; target = target.parentNode) {
        if (target.matches(elementSelector)) {
            handler.call(target, e);
            break;
        }
    }
}, false);

My attempt is as follows

/*document.addEventListener('click',function(e) {
    for (var target = e.target; target && target != this; target = target.parentNode) {
        if (target.matches('.vb')) {
            exportVB.call(target,e);
            break;
        }
    }
}, false);*/

That evidently didn't work so I did a Google search that brought me to this StackOverflow solution

Attach event to dynamic elements in javascript

document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'brnPrepend'){
          //do something
     }
 });

//$(document).on('click','#btnPrepend',function(){//do something})

Testing that gave me this idea. I commented it out because that apparently didn't work either.

/*document.addEventListener('click',function(e) {
    if (e.target && e.target.className == 'vb') {
        exportVB(this.value);
    }
});*/

Just for reference, the original jQuery function works well.

I tried it again and edited the original post. It still doesn't work. — Funny Mouse, Apr 23 '20 at 12:24

score 1 · Answer 1 · answered Apr 23 '20 at 13:30

I solved it.

document.body.addEventListener('click',function(e) {
    for (var target = e.target; target && target != this; target = target.parentNode) {
        if (target.matches('.vb')) {
            exportVB(target.value);
            break;
        }
    }
});

I can't explain how it worked because I didn't write the original code in the first place. But there were two things I change.

exportVB.call(target.e) to exportVB(target.value)
Removing the false as the last argument.

score 1 · Answer 2 · answered Apr 23 '20 at 13:33

Rather than iterating over each parent element manually, consider using .closest instead, which will return the ancestor element (or the current element) which matches a selector:

document.querySelector('button').addEventListener('click', () => {
  document.body.insertAdjacentHTML('beforeend', '<span class="vb">some span </span>');
});

document.body.addEventListener('click', (e) => {
  if (e.target.closest('.vb')) {
    console.log('vb clicked');
  }
});

<button>add span</button>

Thank you. I appreciate the feedback. I didn't think of using closest before. — Funny Mouse, Apr 23 '20 at 14:38

Event Delegation / Attaching events to dynamically created elements using Vanilla JavaScript

2 Answers2