Javascript Vanilla - How to attach event listener on element inside ajax content?
Question
If in Jquery we can simply delegate the event in <body> like this:
$('body').on('click', 'a[data-method]', function () {
// event action here
});
But how we do that in Vanilla Javascript?
Note: <a data-method=""> is created inside ajax content
Thanks.
1 answers
solution1
1 ACCPTED 2018-06-22 04:03:03
You can add an event listener to body , and then check to see if the event.target.matches the desired selector:
document.body.addEventListener('click', (event) => { if (!event.target.matches('a[data-method]')) return; console.log('click'); }); setTimeout(() => { const a = document.body.appendChild(document.createElement('a')); a.setAttribute('data-method', 'foo'); a.textContent = 'aaa'; }, 100);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript : how to re-attach the same event listener to a element reppeared?
Adding an event listener to an element that doesn't exist yet in vanilla javascript
Attach javascript event to content loaded with AJAX
Javascript - How to compare the element value inside event listener to the the array element?
How to attach an event listener to a javascript var
How can I attach an event listener to an element that has itself been inserted with Javascript? (without jQuery)
How can I prevent duplication in event listener in vanilla javascript?
Vanilla Javascript how override added function on event listener?
How to attach a vanilla JavaScript keyup listener to an angular md-autocomplete input using the dom id?
Vanilla Javascript: .forEach Loop Not Applying Event Listener
Related Tags