jQuery滚动加载帖子时contenteditable div重复问题求助

看起来你遇到的核心问题是滚动加载新帖子时，重复调用了emojiarea插件的初始化逻辑，导致已经处理过的旧帖子输入框被再次初始化，从而生成多个重复的.emoji-wysiwyg-editor元素。下面给你两种可行的解决方案：

方案1：精准初始化新加载的帖子元素（推荐） #

滚动加载AJAX请求成功后，不要全局重新初始化所有.emojis-wysiwyg元素，而是只针对刚添加到页面的新帖子里的输入框进行初始化。这样完全不会影响旧帖子的已初始化元素。

修改你的滚动加载回调代码：

// 滚动加载逻辑示例
$(window).scroll(function() {
    if ($(window).scrollTop() === $(document).height() - $(window).height()) {
        $.ajax({
            url: "你的加载更多接口地址",
            success: function(data) {
                // 将新帖子转为jQuery对象，方便后续操作
                const $newPosts = $(data);
                // 添加到页面容器
                $("#posts-container").append($newPosts);

                // 仅初始化新帖子里的普通表情输入框
                $newPosts.find('.emojis-plain').emojiarea({ wysiwyg: false });
                
                // 仅初始化新帖子里的富文本表情输入框
                const $newWysiwyg = $newPosts.find('.emojis-wysiwyg').emojiarea({ wysiwyg: true });
                
                // 给新初始化的富文本框绑定change事件
                $newWysiwyg.on('change', function() {
                    $('#emojis-wysiwyg-value').text($(this).val());
                });
                $newWysiwyg.trigger('change');
            }
        });
    }
});

方案2：用标记类避免重复初始化 #

如果你的滚动加载逻辑不方便直接获取新帖子元素，可以给已经初始化过的输入框添加一个标记类，每次初始化时跳过这些已标记的元素：

修改你的初始化代码（包括页面首次加载和滚动加载后的初始化）：

// 初始化普通表情输入框：只处理未标记的元素
$('.emojis-plain:not(.emoji-initialized)')
  .addClass('emoji-initialized') // 添加标记类
  .emojiarea({ wysiwyg: false });

// 初始化富文本表情输入框：同样只处理未标记的元素
const $wysiwyg = $('.emojis-wysiwyg:not(.emoji-initialized)')
  .addClass('emoji-initialized')
  .emojiarea({ wysiwyg: true });

// 绑定change事件并触发
$wysiwyg.on('change', function() {
    $('#emojis-wysiwyg-value').text($(this).val());
});
$wysiwyg.trigger('change');

这样不管是页面首次加载，还是滚动加载后重新执行这段代码，都会自动跳过已经处理过的输入框，避免重复生成编辑器div。

问题根源说明 #

每次滚动加载新内容后，如果你重新执行了全局初始化代码（比如$('.emojis-wysiwyg').emojiarea(...)），会选中页面上所有匹配的元素——包括之前已经初始化过的旧帖子输入框。而emojiarea插件每次被调用时，都会给目标元素生成新的编辑器容器，最终导致一个帖子里出现多个重复的.emoji-wysiwyg-editor。

内容的提问来源于stack exchange，提问作者khalid seleem