Jquery: Can't select append element

Question

I am trying to display alert when I click the link inside the ul li but somehow it is not working. My jquery fail to select the link which I append it.

MY HTML

<ul id="typeList"></ul>

MY JQUERY

 $("a.type").on("click", function(){                
            alert("click");
 });

$("<li><a href='#' class='type' type =" +results.rows.item(i).Type + " >"+ results.rows.item(i).Type +"</a></li>").appendTo('ul#typeList');

DESIRED LINE CREATED

<ul>
   <li><a class="type" href='#' type ='People'>People</a></li>
   <li><a class="type" href='#' type ='Places'>Places</a></li>
</ul>

score 2 · Accepted Answer · answered Aug 19 '12 at 10:45

2

Modify your on trigger to catch click events inside ul:

 $("#typeList").on("click", "a.type", function(){                
            alert("click");
 });

This attaches an event handler to only one element (your ul#typeList), but it will only work for a.type elements inside ul.

answered Aug 19 '12 at 10:45

Zbigniew

27,184
6
59
66

Thanks. It worked. Does that means I had to use if I using nested elements? – shoujo_sm Aug 19 '12 at 11:00
Not necessairly, but I recommend using it, because it attaches only one event handler. – Zbigniew Aug 19 '12 at 11:11

score 0 · Answer 2 · answered Aug 19 '12 at 10:55

You can't attach an event handler to an element that does not yet exists!

Delegate the event to an element that does exist, like in the answer given by @des, or append the element before you attach the handler:

$("<li><a href='#' class='type' type =" +results.rows.item(i).Type + " >"+ results.rows.item(i).Type +"</a></li>").appendTo('ul#typeList');

$("a.type").on("click", function(){                
    alert("click");
});

FIDDLE

score -1 · Answer 3 · answered Aug 19 '12 at 10:45

-1

Try this for getting the on click

$(function(){
   $(".type").click(function(){                
                alert("click");
     });
});

answered Aug 19 '12 at 10:45

Akhi

2,242
18
24

1

This is not correct. The problem is that dynamically elements cannot be selected for the events, because the handlers are attached on load. `.on()` works, but has to be added to a higher level at the DOM. – PeeHaa Aug 19 '12 at 10:47
i have edited. now the jquery snippet loads after the page load is complete. – Akhi Aug 19 '12 at 10:51

Jquery: Can't select append element

3 Answers3