I am trying to figure out how to bind an event to dynamically created elements. I need the event to persist on the element even after it is destroyed and regenerated.
Obviously with jQuery's live function its easy, but what would they look like implemented with native Javascript?
Here's a simple example:
function live(eventType, elementId, cb) {
document.addEventListener(eventType, function (event) {
if (event.target.id === elementId) {
cb.call(event.target, event);
}
});
}
live("click", "test", function (event) {
alert(this.id);
});
The basic idea is that you want to attach an event handler to the document and let the event bubble up the DOM. Then, check the event.target property to see if it matches the desired criteria (in this case, just that the id of the element).
Edit:
@shabunc discovered a pretty big problem with my solution-- events on child elements won't be detected correctly. One way to fix this is to look at ancestor elements to see if any have the specified id:
function live (eventType, elementId, cb) {
document.addEventListener(eventType, function (event) {
var el = event.target
, found;
while (el && !(found = el.id === elementId)) {
el = el.parentElement;
}
if (found) {
cb.call(el, event);
}
});
}
id you've specified. I'll update my answer to reflect this. –
Geiger In addition to Andrew's post and Binyamin's comment, maybe this is an option:
With this you can use 'nav .item a' as the selector. Based on Andrew's code.
function live (eventType, elementQuerySelector, cb) {
document.addEventListener(eventType, function (event) {
var qs = document.querySelectorAll(elementQuerySelector);
if (qs) {
var el = event.target, index = -1;
while (el && ((index = Array.prototype.indexOf.call(qs, el)) === -1)) {
el = el.parentElement;
}
if (index > -1) {
cb.call(el, event);
}
}
});
}
live('click', 'nav .aap a', function(event) { console.log(event); alert('clicked'); });
e.preventDefault() inside addEventListener. If used, then you'll need to change it to document.querySelector(elementQuerySelector).addEventListener(eventType, function (event) { else it will prevent you from clicking any other elements on the page –
Danish The other solutions are a little overcomplicated...
document.addEventListener('click', e => {
if (e.target.closest('.element')) {
// .element has been clicked
}
}
There is a polyfill in case you need to support Internet Explorer or old browsers.
document.querySelector('.ajax-container') instead of document to improve performance. –
Fugitive for (const element of elements) { ... } on things where i need a click event with ajax. I'm curious to know what the performance downsides are though..it seems like there might be a few. I spoke w/ my friend Joah and he re-wrote the code to even be more performant. w/ his version the click event happens on the actual <button> itself, not the document. check it out codepen.io/oneezy/pen/QWGyXzd –
Habitat An alternative to binding an event to dynamically to a specific element could be a global event listener. So, each time you update the DOM with another new element event on that element will also the "catches". An example:
var mybuttonlist = document.getElementById('mybuttonlist');
mybuttonlist.addEventListener('click', e=>{
if(e.target.nodeName == 'BUTTON'){
switch(e.target.name){
case 'createnewbutton':
mybuttonlist.innerHTML += '<li><button name="createnewbutton">Create new button</button></li>';
break;
}
}
}, false);ul {
list-style: none;
padding: 0;
margin: 0;
}<ul id="mybuttonlist">
<li><button name="createnewbutton">Create new button</button></li>
</ul>In this example I have an event listener on the <ul> for click events. So, an event happens for all child elements. From the simple event handler I created, you can see that it is easy to add more logic, more buttons (with different or repeating names), anchors etc.
Going all in, you could add the eventlistener to document instead of the list element, catching all click events on the page and then handle the click events in the event handler.
data-event which has no semantic meaning. And add some way to change the event options. For code like this I recommend Vue.js, handles all that stuff for you ;) –
Fugitive This becomes simpler with the .matches() element api.
const selector = '.item'
document.addEventListener('click', (e) => {
if ( ! e.target.matches(selector) ) {
return
}
// do stuff here
})
The jQuery equivalent:
$('.item').live( 'click', (e) => {
// do stuff here
})
© 2022 - 2024 — McMap. All rights reserved.
.live()is deprecated for a long, long time. It was replaced by.delegate(), which was replaced by.on(), so please use the last one. Furthermore, the last one shows the difference between binding and delegating, so you may wish to take a look. The most important is checking for event target. – Highlands