JQuery Scroll事件未触发求助：动态元素滚动加载失效

问题根源 #

你写的所有事件绑定代码都在$(document).ready()里执行，但.convHistory是动态添加的元素——初始DOM加载完成时这个元素还不存在，所以直接通过选择器绑定的事件根本没作用。而你在控制台输入代码时，元素已经被渲染到页面里了，选择器能找到目标，绑定自然生效。

可行解决方案 #

方案1：利用事件捕获模式监听

scroll事件不会冒泡，但可以在捕获阶段通过document监听，精准匹配目标元素：

document.addEventListener('scroll', function(event) {
  // 用classList.contains准确匹配类名，避免误判包含相似字符串的其他类
  if (event.target.classList.contains('convHistory')) {
    console.log('scrolling', event.target);
    // 在这里编写你的内容加载逻辑
  }
}, true); // 必须开启捕获模式（第三个参数设为true）

方案2：动态创建元素后立即绑定

如果知道.convHistory元素的创建时机，直接在元素添加到DOM之后绑定事件：

// 示例：动态创建并添加元素的代码
function createConvHistory() {
  // 创建元素
  const convEl = $('<div class="convHistory"></div>');
  // 添加到页面容器中
  $('#target-container').append(convEl);
  // 元素存在后绑定scroll事件
  convEl.on('scroll', function() {
    console.log('scroll事件触发');
    // 执行内容加载操作
  });
}

方案3：用MutationObserver监听DOM变化

如果不确定元素何时被添加，用DOM变化监听工具自动绑定事件：

// 创建观察者实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // 遍历所有新增节点
    mutation.addedNodes.forEach(function(node) {
      // 检查当前节点是否是目标元素
      if (node.nodeType === 1 && node.classList.contains('convHistory')) {
        $(node).on('scroll', function() {
          console.log('scroll事件触发');
          // 内容加载逻辑
        });
      }
      // 检查节点的子元素是否包含目标元素
      $(node).find('.convHistory').each(function() {
        $(this).on('scroll', function() {
          console.log('scroll事件触发');
          // 内容加载逻辑
        });
      });
    });
  });
});

// 配置并启动监听（监听body下所有子元素变化）
observer.observe(document.body, {
  childList: true,
  subtree: true
});

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