動的に後から追加した要素（リスト）に対してのクリックイベント（JavaScript）

動的に後から追加した要素（リスト）に対して、クリックイベントを発生させる方法を書きます。

jQueryを利用したコードになります。

以下、HTML。

<ul id="addlist"></ul>

以下、JavaScript。

$(function(){
    $('#addlist').on('click', 'li', function () {
        alert($(this).text() + ', ' + $(this).attr("data-list"));
    });
    
    $('#addlist').empty();
    var cnt = 3;
    for (var i = 0; i < cnt; ++i) {
        $('<li>').text('list' + i).attr('data-list', 'data' + i).prependTo('#addlist');
    }
});

間違えて、

$(‘#addlist li’).on(‘click’, function () {

のようにしてしまうことがありますが、これは既に生成されているli要素のみにイベントハンドラを登録します。

それを

$(‘#addlist’).on(‘click’, ‘li’, function () {

とすることで、新しく生成されたli要素にもイベントハンドラを適用できます。