jquery - Jquery：追加要素を選択できません

Question

ul li内のリンクをクリックするとアラートを表示しようとしていますが、どういうわけか機能しません。私のjqueryは、追加したリンクを選択できません。

私の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');

作成した希望のライン

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

Answer 1

トリガーを変更して、on内部のクリックイベントをキャッチしますul。

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

これにより、イベントハンドラーは1つの要素（your ul#typeList）にのみアタッチされますが、a.type内部の要素に対してのみ機能しますul。

Answer 2

まだ存在していない要素にイベントハンドラーをアタッチすることはできません。

@desで指定された回答のように、存在する要素にイベントを委任するか、ハンドラーをアタッチする前に要素を追加します。

$("<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");
});
​

フィドル

Answer 3

クリックしてもらうためにこれを試してください

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