using on() jquery for dynamic content

Question

I am trying to use on a dynamically added content and I'm not sure what I'm missing. I have two buttons one creates UL inside DIV. Then I click on another button to create LI inside the UL. On click on any of the LI i should get an alert message but nothing is happening!

http://jsfiddle.net/EkW63/

<div id='ok'></div>
<button id='fst'>create ul</button>
<button id='snd'>create li</button>

<script>
$("#fst").click(function(){
    $("#ok").html("<ul class='ul'></ul>");
});
$("#snd").click(function(){
    $(".ul").html("<li class='myclass'>one</li><li class='myclass'>two</li>");
});

$("ul").on('click', 'li.myclass', function(){ alert('ok'); });`
</script>

any suggestion?

ul itself is created dynamically, that means it doesn't even exist when you tried to call on on it. — satoru
– satoru, Commented Jul 22, 2013 at 2:30

nix · Accepted Answer · 2013-07-22 02:31:12Z

2

You should bind on with #ok div. Like this:

$("#ok").on('click', 'li.myclass', function(){ alert('ok'); });

Your ul is dynamically created as well so it will not work. on should be bound to elements that are already on the page when it loads.

answered Jul 22, 2013 at 2:31

nix

3,3022 gold badges24 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iConnor · Accepted Answer · 2013-07-22 02:39:15Z

1

Use like this

$(document).on('click', 'ul li.myclass', function(){ 
    alert('ok'); 
});

Or even better ( opinion )

$("#fst").click(function(){
    $("#ok").html("<ul class='ul'></ul>");
});

var li = $("<li class='myclass'>one</li><li class='myclass'>two</li>");
$("#snd").click(function(){
    $(".ul").html(li);
});

li.on('click', function() {
   alert('hi');
});

For overall better code write all of like similar to this

$("#fst").click(function(){
    $("#ok").html('').append(
        $('<ul>', {'class': 'ul'})
    );
});

var li = $('<li>', {
    'class': 'myClass', 
    click: function() {
        alert('Hello');
    }
}),

$("#snd").click(function(){
    $(".ul").html('').append(li);
});

I use append because it's quicker, than innerHTML

edited Jul 22, 2013 at 2:39

answered Jul 22, 2013 at 2:28

iConnor

20.2k14 gold badges67 silver badges98 bronze badges

Comments

carl-lopez · Accepted Answer · 2013-07-22 02:33:24Z

0

Since you're dynamically creating the element, you need to bind the click event to the new element right after you created it, otherwise it won't work.

answered Jul 22, 2013 at 2:33

carl-lopez

5525 silver badges12 bronze badges

Collectives™ on Stack Overflow

using on() jquery for dynamic content

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related