如何在未追加DOM的Ajax加载内容中触发点击并读取生成元素

我需要触发所有匹配元素的点击事件，然后读取存储在变量中的DOM内生成的元素。如何在不追加Ajax获取的DOM的情况下实现？或者如何将该DOM加载到隐藏浏览器标签页中，使window和document事件能够冒泡？

代码示例：

let url = 'https://www.amazon.com/dp/B07VHXT1R3';
$.get( url ).then(resp => {
  let dom = $( resp );
  //images preload
  dom.find('#altImages li input').each(function(){
    // this would generate other elements inside the dynamic dom,
    // but this is stored into a variable
    $(this).trigger('click');
  });
  let images = [];
  dom.find('li.image img').each(function(){
    // this would have to read the images generated
    // but only read one element that comes already rendered
    images.push( $(this).data('old-hires') || this.src );
  });
  [ ... ]

具体来说，我需要在未渲染且未绑定window和document对象的DOM中实现事件冒泡，请问有没有不占用过多内存的可行方案？

我来给你几个低内存开销的可行方案，你可以根据自己的场景选择：

方案1：临时挂载到隐藏容器（最推荐） #

这是最简单高效的办法，不用新开标签页，内存占用极低。咱们可以创建一个绝对定位、移出视口的隐藏div，把Ajax拿到的DOM临时挂进去——这样它就能绑定到当前页面的window和document，事件自然就能正常冒泡了，用完还能立刻销毁，不会留垃圾。

代码示例：

let url = 'https://www.amazon.com/dp/B07VHXT1R3';
$.get(url).then(resp => {
  // 创建一个完全不影响页面的隐藏容器
  const hiddenContainer = $('<div style="position:absolute; left:-9999px; top:-9999px; visibility:hidden;"></div>').appendTo('body');
  let dom = $(resp).appendTo(hiddenContainer);

  // 现在触发点击事件，事件能正常冒泡到document/window了
  dom.find('#altImages li input').trigger('click');

  // 读取动态生成的图片
  let images = [];
  dom.find('li.image img').each(function(){
    images.push( $(this).data('old-hires') || this.src );
  });

  // 用完立刻移除容器，释放内存
  hiddenContainer.remove();

  // 后续处理images数组...
});

这个方案的优势：

• 内存开销几乎可以忽略，只是临时加了个不可见的DOM节点
• 完全兼容原页面的事件逻辑，包括依赖document的监听和DOM树关系的操作
• 操作简单，没有复杂的环境隔离逻辑

方案2：手动模拟事件冒泡（适合简单场景） #

如果不想把DOM挂载到页面上，你可以手动创建并触发符合标准的事件，模拟冒泡过程。不过这个方法需要你清楚目标元素的事件绑定逻辑，适合事件逻辑不复杂的场景：

dom.find('#altImages li input').each(function(){
  // 创建一个带冒泡属性的点击事件，绑定当前页面的window
  const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  // 手动触发事件，会按照标准事件流冒泡
  this.dispatchEvent(clickEvent);
});

注意：如果原页面的事件处理逻辑依赖元素在DOM树中的位置（比如用closest()找父元素），或者依赖document上的全局事件监听，这种模拟可能不如挂载DOM可靠。

方案3：用隐藏iframe隔离环境（替代新开标签页） #

如果必须隔离当前页面的环境，用隐藏iframe比新开标签页更省内存，而且更容易控制——新开标签页会占用独立的进程内存，而iframe只是当前页面的一个子环境：

let url = 'https://www.amazon.com/dp/B07VHXT1R3';
$.get(url).then(resp => {
  // 创建隐藏的iframe
  const iframe = $('<iframe style="display:none;"></iframe>').appendTo('body');
  const iframeDoc = iframe[0].contentDocument || iframe[0].contentWindow.document;
  
  // 把HTML写入iframe，让它在独立环境中渲染
  iframeDoc.open();
  iframeDoc.write(resp);
  iframeDoc.close();

  // 等待iframe内DOM完全加载完成
  iframe.on('load', function(){
    const iframeDom = $(iframeDoc.body);
    // 触发点击事件，事件在iframe内部正常冒泡
    iframeDom.find('#altImages li input').trigger('click');

    // 读取动态生成的图片
    let images = [];
    iframeDom.find('li.image img').each(function(){
      images.push( $(this).data('old-hires') || this.src );
    });

    // 用完移除iframe，释放资源
    iframe.remove();

    // 后续处理...
  });
});

这个方案适合需要完全隔离当前页面样式、全局变量的场景，但内存开销比隐藏容器大一点，不过远低于新开标签页。

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