Click on dynamically created HTML elements using JQuery

Question

I want to be able to click on a element I've dynamically created and create an alert, and I can't seem to figure it out. I've looked at a bunch of similar threads on how to use .on, but I can only get it to work for static elements. Thanks in advance!

<span id="about">About</span>

<div id="lhn"></div>

And JavaScript:

$(document).ready(function () {

    $("#about").click(function () {

        $("#lhn").append("<div id='#child'>Child</div>");

        $("#lhn").on("click", "#child", function () {
            alert("Child has been clicked");
        });

    });

});

switching the order did it, thanks everyone! And sorry about the ID typo, good catch. — fergusrm, Jun 18 '13 at 01:21

score 3 · Accepted Answer · answered Jun 17 '13 at 22:53

Bind the event outside your about click handler. also, your ID should be child not #child when creating the element:

$(document).ready(function() {
    $("#lhn").on("click", "#child", function () {
        alert("Child has been clicked");
    });

    $("#about").click(function () {
        $("#lhn").append("<div id='child'>Child</div>");
    });
});

score 1 · Answer 2 · answered Jun 17 '13 at 22:58

1

You have multiple issues with the code that you have written.

Firstly

$("#lhn").append("<div id='#child'>Child</div>");

supposed to be

$("#lhn").append("<div id='child'>Child</div>");

Secondly - ID's in a HTML page are supposed to be unique

So replace

$("#lhn").append("<div id='child'>Child</div>");

with

$("#lhn").append("<div class='child'>Child</div>");

Third

I see you are already delegating the event, so move the click event to outside the click event . Otherwise events will be bound multiple times to the element on every click.

$("#about").click(function () {
    $("#lhn").append("<div class='child'>Child</div>");
});

$("#lhn").on("click", ".child", function () {
    alert("Child has been clicked");
});

answered Jun 17 '13 at 22:58

Sushanth --

55,259
9
66
105

If I'm only appending one child, wouldn't I still want to use an ID rather than a class? – fergusrm Jun 18 '13 at 01:28
If it's only a single element then you can go with an `ID` – Sushanth -- Jun 18 '13 at 01:29
Cool. Still learning, wanted to make sure. – fergusrm Jun 18 '13 at 04:25

score 0 · Answer 3 · answered Jun 17 '13 at 22:54

0

One technique I use for appending elements is to create the element, then append it.

var element = $("<div id='child'>Child</div>").appendTo("#lhn").on("click", function() {
    alert("Child has been clicked");
});

answered Jun 17 '13 at 22:54

teynon

7,540
10
63
106

score 0 · Answer 4 · answered Jun 18 '13 at 01:45

0

user this simple code,

$("#child).live("click",function(){
    alert();
});

answered Jun 18 '13 at 01:45

Angela Taylor

151
1
11

Click on dynamically created HTML elements using JQuery

4 Answers4