<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Event Listener - JavaScript</title> | |
</head> | |
<body> | |
<div class="static">Static</div> | |
<button class="add" onclick="return false;">Add</button> | |
<script type="text/javascript"> | |
document.querySelector( '.add' ).addEventListener( 'click', addElement ); | |
function addElement() { | |
var static = document.querySelector( '.static' ); | |
var dynamic = document.createElement( 'div' ); | |
dynamic.classList.add( 'dynamic' ); | |
dynamic.innerText = 'Dynamic'; | |
static.insertAdjacentElement( 'afterend', dynamic ); | |
} | |
/** | |
* Set event listener on dynamic elements | |
* | |
* {@link https://www.yudhistiramauris.com/how-to-add-javascript-event-listener-on-dynamic-elements/} | |
* | |
* @param {string} type Event name | |
* @param {string} selector CSS/JS selector | |
* @param {Function} callback Function to execute upon event trigger | |
*/ | |
function setDynamicListener( type, selector, callback ) { | |
document.addEventListener( type, function( e ) { | |
if ( e.target.matches( selector ) ) { | |
var elements = this.querySelectorAll( selector ); | |
for ( var i = 0; i < elements.length; i++ ) { | |
elements[i].addEventListener( type, callback( e ) ); | |
} | |
} | |
} ); | |
} | |
setDynamicListener( 'click', '.dynamic', function( e ) { | |
e.target.remove(); | |
} ); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment