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

Appending data from a handler loaded after the script

本文关键字：程序 追加 数据 处理 脚本 加载      更新时间：2023-09-26

我做了一个显示用户Facebook照片的网站。下面的代码将照片附加到div"facebook-images"中。这部分工作正常。我遇到的问题是图像是在加载下面的 Javascript 代码后附加的;因此，当浏览器读取底部的单击函数代码时，不会创建处理程序"FB-image"，因此它不起作用。

我相信我需要使用 jQuery on() ，但是在哪里？我试图在下面的代码中随处on()。我尝试过与附加绑定，我尝试过实时（我知道它已被弃用，但值得一试）。没有任何效果。

有什么想法吗？

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

解决此问题的最简单方法是在将图像插入页面后添加单击处理程序。

<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);
相关文章：