Search code examples
jqueryhtmljquery-uiappendto

Jquery: Can't select append element

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>
Solution

  • 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.