Check If An Event Listener Is Already Listenning To An Object (to Avoid Duplicate Actions)

My page looks like: 123Add Anchor

Solution 1:

Create a delegated event, like Sergiu suggests. Instead of binding a click event to an element that exists in a dynamic list of elements, bind a click event to the element's parent, which will still raise a click event even when you click one its children. This is called event bubbling. Here's a snippet of code showing how to do it using jQuery:

// Attach a delegated event handler
$( "#list" ).on( "click", "a", function( event ) {
    f();
});

You bind the click event directly to "#List", being the parent and tell it to specifically listen for events from "a" elements, which is defined in the second parameter.