0

ユーザーのFacebookの写真を表示するサイトを作成しました。以下のコードは、写真をdiv「facebook-images」に追加します。この部分は正常に機能します。私が抱えている問題は、以下のJavascriptコードがロードされた後に画像が追加されていることです。そのため、ブラウザが下部のクリック機能コードを読み取ったときにハンドラ「fb-image」が作成されないため、機能しません。

jQueryを使用する必要があると思いますon()が、どこで？私はon()以下のコードのいたるところに入れようとしました。私はappendでバインドしようとしました、私はライブで試しました（これは非推奨ですが、一見の価値があります）。何も機能していません。

何か案は？

<div class="target">
    
</div>
    
<div id="facebook-images">

</div>

<script>
    $.when(window.deferredes.fbLoaded, window.deferredes.fbLoggedIn).then(function () {
        $.getJSON('https://graph.facebook.com/me/photos?access_token=' + FB.getAccessToken(), function (data) {
            $.each(data.data, function (i, face) {
                $('#facebook-images').append("<div class='fb-image'><img src='" + face.source + "' ></div>");
            });
        });
    });

    $(".fb-image img").click(function () {
        $(".target").append("<h1>hi</h1>");
    });
</script>
4

1 に答える 1

1

これを修正する最も簡単な方法は、画像がページに挿入された後にクリックハンドラーを追加することです。

<script>
    $.when(window.deferredes.fbLoaded, window.deferredes.fbLoggedIn).then(function () {
        $.getJSON('https://graph.facebook.com/me/photos?access_token=' + FB.getAccessToken(), function (data) {
            $.each(data.data, function (i, face) {
                $('#facebook-images').append("<div class='fb-image'><img src='" + face.source + "' ></div>");
            });
            $(".fb-image img").click(function () {
                $(".target").append("<h1>hi</h1>");
            });
        });
    });

</script>

必要に応じて、委任されたイベント処理を使用することもできます。これを行うには、イベント処理コードを実行するときに存在する共通の親にイベントハンドラーを設定し、次のようなセレクターを渡すことで、.on()の委任された形式を使用します。.on()

<script>
    $.when(window.deferredes.fbLoaded, window.deferredes.fbLoggedIn).then(function () {
        $.getJSON('https://graph.facebook.com/me/photos?access_token=' + FB.getAccessToken(), function (data) {
            $.each(data.data, function (i, face) {
                $('#facebook-images').append("<div class='fb-image'><img src='" + face.source + "' ></div>");
            });
        });
    });

    $("#facebook-images").on('click', ".fb-image img", function () {
        $(".target").append("<h1>hi</h1>");
    });
</script>

委任された形式の.on()作品は次のようになります。

$(selector of static parent).on(event, selector that matches dynamic object, fn);
于 2012-08-09T00:52:53.770 に答える