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

Question

我创建了一个显示用户 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>

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