li.click does not work on dynamic created element

Question

i am creating new list elements dynamically. When clicking these elements I want execute code. The event $("li").click() only fires for my default list item <li>I am a default list element</li> but not for any newly created ones. Please see my code below:

<script type="text/JavaScript">
$(document).ready(function() {
    console.log('document.ready callback');

    $("input#input2").click( function() {
        console.log('input#input2.click: ' + $("input#input1").val() + ' added to list');
        $("ul").append('<li>'+$("input#input1").val()+'</li>');
    });

    $("li").click( function() {
        console.log('li.click: ' +$(this).text());
    });

    // Info
    // .on('click', function()
    // .live('click', function()
    // did not solve this problem
});<script><html>
<body>
    Enter some stuff: <input type="text" id="input1" value="stuff">
    <br>
    <input type="submit" id="input2" value="Submit stuff to List">
    <p>stuff list!</p>
    <ul>
        <li>I am a default list element</li>
    </ul>
</body>

I found a similar question here but unfortunately that did not solve my current case.

thx y'all!!

possible duplicate of [jQuery click not working for dynamically created items](http://stackoverflow.com/questions/9484295/jquery-click-not-working-for-dynamically-created-items) — Blazemonger, Mar 15 '13 at 17:25

Adil · Answer 1 · 2013-03-15T17:22:37.893

4

Use on for bind event on dynamically create elements instead of click and delegate the event to parent element or document. You can read more about on here.

$(document).on("click", "li", function() {
    console.log('li.click: ' +$(this).text());
});

edited Mar 15 '13 at 17:22

answered Mar 15 '13 at 17:17

Adil

146,340
25
209
204

would it be better to always use "$(document).on()" instead of "$(some Element)".click() ?? – Kim Mar 15 '13 at 17:24

score 2 · Accepted Answer · answered Mar 15 '13 at 17:19

2

delegating it to the closest static parent(which is present in the document) is better than using document (performance wise)

try this

$("ul").on("click", "li", function() {
  console.log('li.click: ' +$(this).text());
});

you can read more about on() events here

answered Mar 15 '13 at 17:19

bipen

36,319
9
49
62

awesome! that answers my additional question :) would it be better to always use "$(document).on()" instead of "$(some Element)".click() ?? (argh..sorry not used to the comment function ..yet – Kim Mar 15 '13 at 17:26
would it be better to always use "$(document).on()" instead of "$(some Element)".click() ?? (argh..sorry not used to the comment function ..yet) – Kim Mar 15 '13 at 17:27
`$(some Element)".click() ` is better if your someElement is not added dynamically... if added dynamically.. `on` is preffered as `live` use to do this before .. but is depricated and removed in jquery 1.9 version – bipen Mar 15 '13 at 17:31
1

@Kim: You should use delegates for dynamically added elements, or when you want to catch the same event on a whole lot of elements, otherwise just catch the event on each element. – Guffa Mar 15 '13 at 17:46

score 0 · Answer 3 · answered Mar 15 '13 at 17:18

0

The click event is only being bound to the elements that are selected in $("li") when it is called. Try adding a click event binder to the script you're using to add elements to bind a new click behavior each time you add an element.

answered Mar 15 '13 at 17:18

ckersch

7,507
2
37
44

score 0 · Answer 4 · answered Mar 15 '13 at 17:19

0

The live method would work, but it's replaced by the use of the on method to create a delegate. You need to supply a parent element to apply the delegate to, and a selector to filter out the elements that event should be triggered on:

$("ul").on("click", "li", function() {

answered Mar 15 '13 at 17:19

Guffa

687,336
108
737
1,005

Why are you mentioning `live`? – John Dvorak Mar 15 '13 at 17:20
Apologies, didn't notice that line – John Dvorak Mar 15 '13 at 17:32

li.click does not work on dynamic created element

4 Answers4