jQuery配合infinite scroll时新加载元素点击事件不生效的问题问询

这个现象是必然会发生的，不是你写的代码有bug，核心原因有两个：

• 你最初写的$(".window").click(...)是jQuery的直接事件绑定逻辑：脚本运行到这行代码的瞬间，只会把当时页面上已经存在的、匹配.window类名的元素，逐个绑上点击触发逻辑。后续不管什么时候infinite scroll新加载的.window元素，都是脚本执行完之后才出现在DOM里的，自然不会被之前的绑定逻辑覆盖到，也就没法触发预设的交互。这和所谓的“jQuery性能优化”没关系，是直接绑定模式天生的限制。
• 你之前尝试的原生绑定方案出问题，是因为对addEventListener的this指向理解错了：事件绑定在哪个元素上，handler里的this就永远指向哪个元素。你把事件绑在#desktop上，this就必然是#desktop，永远不会自动变成你点击的那个window元素，所以之前的代码只能操作#desktop本身，根本定位不到实际点击的目标。

方案1：jQuery事件委托（改动量最小，推荐） #

完全不需要给infinite scroll加任何额外的加载完成回调，只要把原来的直接绑定逻辑，换成“在稳定父容器上委托事件”的写法就行——也就是把事件绑在不会动态变化的#desktop上，告诉jQuery“只要这个容器内部发生了点击，并且点击的目标匹配.window类名，就执行对应的逻辑”。
直接把你原来的点击绑定代码替换成下面这段：

$("#desktop").on("click", ".window", function(){
  inactiveall(); 
  cal = cal + 1; 
  // 这里的this会自动指向你实际点击的那个.window元素，和原来的逻辑完全一致
  $(this).css("z-index", cal);
  $(this).find(".title-bar-98").css("background-image", curactiveheader); 
  $(this).find(".title-bar-text").css("color", curactivetitle); 
  tumblractive();
});

这个写法不需要重复扫描DOM：不管是初始加载的帖子，还是后续无限滚动新加载的帖子，只要在#desktop容器内部、带.window类名，点击的时候都能被捕获触发逻辑，完全兼容你现有的所有交互代码。

方案2：修正原生绑定版本 #

如果你更倾向于用原生JS实现，只需要把之前handler里错误的this指向，换成通过事件对象向上查找目标元素就行，代码改成这样：

document.querySelector('#desktop').addEventListener('click', function(e) {
  // 从点击的源头开始向上找，找到最近的.window元素
  const clickedWindow = e.target.closest('.window');
  // 如果这次点击没有落在任何.window元素上，直接跳过不处理
  if (!clickedWindow) return;

  calupdate(); 
  tumblractive(); 
  $(clickedWindow).css("z-index", cal); 
  $(clickedWindow).find(".title-bar-98").css("background-image", curactiveheader); 
  $(clickedWindow).find(".title-bar-text").css("color", curactivetitle);
}, false);

这里用的e.target.closest('.window')，不管你点的是window内部的标题栏、关闭按钮还是帖子正文，都会自动定位到最外层的那个.window容器，不管是新老帖子都能正常命中。

• 做事件委托的时候，一定要把事件绑在永远不会被动态替换的父容器上。如果绑定的父容器本身会被infinite scroll脚本清空、重新渲染，那还是会出现新元素触发不了事件的问题。从你贴的页面结构看，#desktop是长期稳定存在的容器，用它当绑定父级是最合适的。
• 不要为了适配新元素，每次infinite scroll加载完内容就重新跑一次$(".window").click(...)。这种写法不仅麻烦，还会导致同一个元素被重复绑定多次，点一次就触发好几次交互逻辑的bug。

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