javascript - 動的に生成された div へのイベント ハンドラーのバインドに関する問題

Question

画面上のクリックされた div の ID を警告ウィンドウに表示する際に問題があります。これは、ページに追加されるコントロールとイベント ハンドラーの順序によるものであると確信していますが、さまざまな方法を試した後、これを機能させることができません。残念ながら、div が ajax get リクエストから作成されているため、再現可能なコードを投稿できません。

$(document).ready(function () {
    $.getJSON('ClientPortal/GetSkills', function (data) {
        var test = 'poo';
        $.each(data, function (data) {
            $('#flipContainer').append("<div class=flip id='" + this.Value + "' value='" + this.Value + "'>" + this.Text + "<//div>");
        })
    })
})

$(document).ready(function () {
    $(".flip").on('click', function () {
        alert($(this).attr("id"));
     })
})