Question

我创建了一个显示用户Facebook照片的网站。下面的代码将照片附加到div“facebook-images”。这部分工作正常。我遇到的问题是在加载下面的javascript代码后附加图像;所以当浏览器在底部读取点击功能代码时，不会创建处理程序“fb-image”，因此它不起作用。

我相信我需要在（）上使用jQuery，但在哪里？我试图在下面的代码中随处可见（）。我试图绑定附加，我尝试过现场（我知道这是折旧但值得一试）。什么都行不通。

有什么想法吗？

<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>

Answer 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);

从脚本后加载的处理程序中追加数据

1 个答案: