[解決済み] Ajaxで読み込まれたコンテンツにイベントをバインドするには？

質問

リンクがあります。 myLink に AJAX でロードされたコンテンツを挿入する必要があります。 div (appendedContainer)に挿入されるはずです。問題は click イベントが、appendedContainerに挿入された新しく読み込まれたコンテンツに対して実行されないことです。そのため click イベントは、AJAX 関数で読み込まれていない DOM 要素にバインドされています。

イベントがバインドされるように、私は何を変更しなければなりませんか？

私のHTMLです。

<a class="LoadFromAjax" href="someurl">Load Ajax</a>
<div class="appendedContainer"></div>

私のJavaScriptです。

$(".LoadFromAjax").on("click", function(event) {
    event.preventDefault();
    var url = $(this).attr("href"),
        appendedContainer = $(".appendedContainer");

    $.ajax({
    url: url,
    type : 'get',
    complete : function( qXHR, textStatus ) {           
        if (textStatus === 'success') {
            var data = qXHR.responseText
            appendedContainer.hide();
            appendedContainer.append(data);
            appendedContainer.fadeIn();
        }
      }
    });

});

$(".mylink").on("click", function(event) { alert("new link clicked!");});

読み込むべきコンテンツ。

<div>some content</div>
<a class="mylink" href="otherurl">Link</a>

どのように解決するのですか？

動的に生成される要素にはイベントデリゲーションを使用します。

$(document).on("click", '.mylink', function(event) { 
    alert("new link clicked!");
});

これは実際に動作します。以下は、アンカーにクラス .mylink の代わりに data - http://jsfiddle.net/EFjzG/