javascript - Ajax 自动刷新导致我的 jquery 嵌入脚本无休止地重复

Question

好吧，我的免责声明，关于脚本，我是个新手。

我最近在我的网站(phpbb 论坛)上设置了 jquery-oembed，它是一个自动嵌入来自各种网站的媒体内容的代码，如 youtube、twitter、facebook 等...

它很好用，只是我在将它集成到我的聊天框时遇到了问题。聊天通过 ajax 代码运行，该代码会按时间间隔自动刷新。根据我放置脚本的位置，嵌入将显示一个链接而不是嵌入，直到您手动刷新页面......或者......它会嵌入，但每次 ajax 刷新时都会不断重复自己。我一直在玩这个，除非绝对必要，否则我尽量避免打扰你们。

这是嵌入代码，可以在我网站的帖子中找到。

(function($) {
    $(document).ready(function() {
        $(".avatarMessage .postlink").oembed(null, {
            embedMethod: "append",
            startClosed: true, 
            maxWidth: 300,
        });
    });
})

通过搜索我能找到的最好的是我试过的这个片段。如果我将其更改为添加:

(function($) {
    $(document).ready(function() {
        $(".avatarMessage .postlink").oembed(null, {
            embedMethod: "append",
            startClosed: true, 
            maxWidth: 300,
        });
                while (update.firstChild) {
            update.removeChild(update.firstChild);
        }
    });
})

然后它不会一直重复它，但它也不允许嵌入新的 url，所以我不能使用这个。

有什么我可以为此添加的东西，它将 removeChild 限制为该消息的内容，或者可能是我完全没有看到的另一个想法(不要对我感到沮丧，我正在尝试，除了基本的 html 和 css 之外，我没有太多经验。

如果有人感兴趣，这里是触发自动刷新的 ajax 代码。

https://raiderforums.com/mchat/mchat_ajax_mini.js

谢谢你容忍我:)

Answer 1

这是因为每次调用 $(".avatarMessage .poSTLink").oembed(....) 时，所有匹配的元素都将被编译，即使它们已经编译。为防止这种情况，您可以添加一个 new-post 类并在元素编译/嵌入后将其删除:

(function($) {
    $(document).ready(function() {
        $(".avatarMessage .postlink.new-post").oembed(null, {
            embedMethod: "append",
            startClosed: true, 
            maxWidth: 300,
        }).removeClass('new-post');
    });
})

因此，元素将不会在下一次 oembed 调用中匹配。

这是另一种选择，它使用标志代替:

(function($) {
    $(document).ready(function() {
        $(".avatarMessage .postlink").each(function(index, element) {
            var $el = $(element);
            //If already embedded just return
            if ($el.data('oembedded')) return;
            //set the flag
            $el.data('oembedded', true);
            $el.oembed(null, {
                embedMethod: "append",
                startClosed: true,
                maxWidth: 300,
            });
        });
    });
});

希望对您有所帮助。