how to trigger click event on dynamically created element in jquery

Question

if($('#term').children().length == 0){
        $("#term").append("<ul id='ulDynamic' class='ulDynamic'></ul>");
        var i;
        for(i=1;i<=3;i++){
            var liDynamic = "Term "+i;
            var liId = "Term"+i;
            $("#ulDynamic").append("<li id="+liId+ " class='listDynamic'>"+ liDynamic +"</li>");
                    if(i==0){
                       $('#'+liId).click();
        }
    }

.click() is not working since liId is a dynamically created element. I want the first li element to be auto clicked when the page loads. Is there any other way to do it?

Sudhir Bastakoti · Accepted Answer · 2013-09-11 07:00:43Z

13

do something like:

$("#term").append("<ul id='ulDynamic' class='ulDynamic'></ul>");
        var i;
        for(i=1;i<=3;i++){
            var liDynamic = "Term "+i;
            var liId = "Term"+i;
            var $li = $("<li />", {
                "id" : liId,
                "class" : 'listDynamic'
            }).html(liDynamic).click(function() {
                alert("clicked:" + this.id);
            });

            $("#ulDynamic").append($li);            
        }
$("#ulDynamic").find("li:first").trigger("click");

Demo :: jsFiddle

answered Sep 11, 2013 at 7:00

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

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

1 Comment

Sudhir Bastakoti Over a year ago

@user2682527 you could mark it as Accepted Answer if it worked for you..!

Dipesh Parmar · Accepted Answer · 2013-09-11 06:47:48Z

8

I have seen your ID is starting with Term so you can use .on() to add click event on DOM that are added later.

Exapmple

$(document).on('click','[id^="Term"]',function(){
  //code here
});

answered Sep 11, 2013 at 6:47

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

1 Comment

d.lanza38 Over a year ago

He wants to trigger the click event, not bind and event to the the click event.

GautamD31 · Accepted Answer · 2013-09-11 06:46:03Z

5

Try with .trigger() like

 $('#'+liId).trigger('click');

answered Sep 11, 2013 at 6:46

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

Comments

bipen · Accepted Answer · 2013-09-11 07:16:36Z

-4

use event delgation on inside your ready function

try this

 $(function(){
   $('#term').on('click','li:first',function(){
    //do your stuff
   });
 });

edited Sep 11, 2013 at 7:16

answered Sep 11, 2013 at 6:47

bipen

36.6k9 gold badges51 silver badges62 bronze badges

1 Comment

d.lanza38 Over a year ago

He wants to trigger the click event, not bind and event to the the click event.

Collectives™ on Stack Overflow

how to trigger click event on dynamically created element in jquery

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Linked

Related