javascript - .append で追加されたソート可能なアイテムのクリックを検出する

Question

2 つの並べ替え可能なリストを作成しています。そのリストの項目は append() で追加されます。すべてが正常に機能していますが、クリックするとリスト間でアイテムを移動する必要があります。

liのクリックイベントが機能しない理由がわかりません。

コードは次のとおりです。

追加

$("#availble_contacts").append("<li class='contact_li'>" + contact + "</li>");

クリックで移動

$('.contact_li').on('click', function () {
    console.log("click detected");
});

私は何が欠けていますか？

どうもありがとう

Answer 1

は動的に追加されるため、イベント ハンドラを登録するcontact_liために使用する必要があります。event delegation

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#availble_contacts').on('click', '.contact_li', function() {
    console.log("click detected");
});

Answer 2

クリックイベントをliではなくulにバインドし、「イベント」の「ターゲット」によって正確なliを検出することをお勧めします。

$("#availble_contacts").on("click",function(event){
    var e = event || window.event;
    var target = e.target || e.srcElement;
    console.log("you clicked "+target);
})

Answer 3

次のように検索してみてください

$('#availble_contacts').find('.contact_li').on('click', function () {
    console.log("click detected");
});

または、同様delegateのメソッドを使用することもできますclick event

$('#availble_contacts').on('click', '.contact_li', function () {
    console.log("click detected");
});

コードを挿入したことを確認してくださいdom ready

Answer 4

$(document).on('click', '.contact_li', function () {
    console.log("click detected");
});