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