jquery on click is not triggered when I directly access it by ID

Question

I am using dust.js ( after much googling for a lack of good documentation ). Finally I was able to create a hyperlink dynamically.Now I want to give an onclick functionality to the dynamically generated hyperlink.

function createLink(){

    // register the template loading method with dust now
    var compiled = dust.compile("Hello <a href='#' id='linked'>{name}</a>!", "intro");
    dust.loadSource(compiled);

    dust.render("intro", {name: "Fred"}, function(err, out) {
        console.log(out);
        $("#displayHelloSection").html(out);
    });

}

Below is my document ready. Strangely , when I click on the hyperlink generated , I get Apple , but not Orange. I am curious to know why the second onclick did not work ? The difference is ,In the first one , I am using document to refer to my id ('#linked').In the second one I am directly accessing the id.

$(document).ready(function() {


    $(document).on('click','#linked',function(e){

     alert("Apple");

    });

    $('#linked').on('click', function() {

       alert('Orange');

    });

});

score 3 · Accepted Answer · edited May 23 '17 at 10:25

Event handlers specified like this:

$('#linked').on('click', function() {

try to attach themselves to the "#linked" object at the time this code is run. If the object is not present at the time this line of code runs, then no event handler is created.

Event handlers like this:

 $(document).on('click','#linked',function(e){

are delegated event handlers. The event handler is attached to the document element which always exists so it can be attached at any time. It then relies on event propagation for events that actually originate on other elements to bubble up to the document element and when the event handler sees the event, it looks to see what element it originated on to see if that matches "#linked". This allows the "#linked" content to come and go or be created later without affecting the event handler.

So, when dealing with dynamically inserted content that you want event handlers on, you have a couple options:

You can insert the content into the DOM and then attach the event handler.
You can use delegated event handling where you attach the event handler to a static parent object and use the delegated form of .on() to specify the child selector that you want it to dynamically look for.

You can read these other posts on this topic for more information on delegated event handling:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

JQuery Event Handlers - What's the "Best" method

Why not take Javascript event delegation to the extreme?

And this would explain why alert doesn't work. In order to get the alert to work ,you probably need to attach the "apple" alert inside of dust.render. — , Oct 17 '14 at 01:49
@E.Maggini - I've added a couple options for the OP to my answer. — jfriend00, Oct 17 '14 at 01:52
Delegated events ! I will go with opt 2. accepting the answer. — Tito, Oct 17 '14 at 01:54

jquery on click is not triggered when I directly access it by ID

1 Answers1