Abilis - Event binding

by fparent

HTML

<div class="ancestor">
    <a href="#" class="child child-1">child-1</a>
    
    <div class="parent">
        <a href="#" class="child child-2">child-2</a>
        <a href="#" class="child child-3">child-3</a>
    </div>
</div>

JavaScript

$( '.ancestor' ).on( 'click', '.child', function( e ) {
	e.preventDefault();
	alert( e.target.className + ' was clicked' );
});

// Replicate a click event on the child-1 hyperlink
$( '.child-1' ).trigger( 'click' ); // will alert "child child-1 was clicked".

// Add a new element to the parent after the page has initially loaded
$( '.parent' ).append( '<a href="#" class="child child-4">child-4</a>' );

// Replicate a click event on the newly added hyperlink, child-4
$( '.child-4' ).trigger( 'click' ); // will alert "child child-4 was clicked".