使用insertAdjacentHTML动态创建的元素无法被querySelector捕获的问题

问题场景 #

通过insertAdjacentHTML动态创建带.catalog__link类的链接元素后，无法在关联函数中捕获这些元素并绑定点击事件，querySelectorAll始终返回空集合，页面内容加载正常但事件绑定失效。

原代码示例 #

fillCatalog.js

const row = document.querySelector('.catalog__row');

export const fill = function (brand) {
  fetch(`./data/${brand}.json`)
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      let products = [...data.products];

      products.forEach(product => {
       
        row.insertAdjacentHTML(
          'afterbegin',
          ` <a class="catalog__link" href="#" >
              <div class="catalog__product">
              <div class="catalog__product-img">
              <img class="catalog__productImg" src=${product['img-src']} alt="" srcset="" />
              </div>
              <h3 class="catalog__product-model">${product['model']}</h3>
              <p class="catalog__product-brand">${product['brand']}</p>
              <span class="catalog__product-price">${product['price']}</span>
              
          </div></a>`
        );
      });
    });
};

productSave.js

class Product {
  constructor(cardImg, cardName, cardBrand = '', cardPrice) {
    this.cardImg = cardImg;
    this.cardName = cardName;
    this.cardBrand = cardBrand;
    this.cardPrice = cardPrice;
  }
}

const links = document.querySelectorAll('.catalog__link');

export const productSave = function () {
  window.addEventListener('DOMContentLoaded', () => {
    console.log(links);
    links.forEach(link => {
      link.addEventListener('click', e => {
        productItem = link.querySelector('.catalog__product');
        const newProduct = new Product(
          productItem.querySelector('catalog__productImg').src,
          productItem.querySelector('.catalog__product-model').textContent,
          productItem.querySelector('.catalog__product-brand').textContent,
          productItem
            .querySelector('.catalog__product-price-price')
            .textContent.replace(/\D/g, '')
        );
        localStorage.setItem('newCard', JSON.stringify(newProduct));
        console.log(card.querySelector('.card__name').textContent);
      });
    });
  });
};

loadContent.js

import { fill } from './fillCatalog.js';
import { productSave } from './productSave.js';
fill('jordans');
productSave();

HTML页面

<html lang="ru">
  <head>
    <!--=include head.html-->
    </style>
  </head>
  <body>
<div class="catalog">
  <div class="catalog__content">
    <div class="catalog__row"></div>
  </div>
</div>

  </body>

  <script type="module" src="../js/goodscart.js"></script>
  <script type="module" src="../js/loadContent.js"></script>
</html>

问题原因 #

1. 异步执行顺序错误：fill函数中的fetch是异步操作，调用fill('jordans')后，productSave立即执行，但此时动态元素还未创建完成。
2. 元素选择时机过早：const links = document.querySelectorAll('.catalog__link');在模块加载时就执行，此时DOM中还没有动态生成的元素，因此得到空集合。
3. 事件监听绑定逻辑失效：productSave中绑定的DOMContentLoaded事件，可能在函数调用时已经触发，回调无法执行；即便触发，links仍是之前的空集合。
4. 原代码存在语法错误：选择器缺失.（catalog__productImg应为.catalog__productImg）、不存在的选择器（.catalog__product-price-price）、未定义变量（card）。

解决方案 #

方案一：事件委托（推荐，适配动态元素） #

利用事件冒泡机制，给动态元素的父容器绑定事件，无需直接操作动态元素。

修改productSave.js：

class Product {
  constructor(cardImg, cardName, cardBrand = '', cardPrice) {
    this.cardImg = cardImg;
    this.cardName = cardName;
    this.cardBrand = cardBrand;
    this.cardPrice = cardPrice;
  }
}

export const productSave = function () {
  const row = document.querySelector('.catalog__row');
  row.addEventListener('click', (e) => {
    // 匹配点击目标及其父元素中的.catalog__link
    const link = e.target.closest('.catalog__link');
    if (!link) return;
    
    e.preventDefault(); // 阻止a标签默认跳转
    const productItem = link.querySelector('.catalog__product');
    
    const newProduct = new Product(
      productItem.querySelector('.catalog__productImg').src,
      productItem.querySelector('.catalog__product-model').textContent,
      productItem.querySelector('.catalog__product-brand').textContent,
      productItem.querySelector('.catalog__product-price').textContent.replace(/\D/g, '')
    );
    
    localStorage.setItem('newCard', JSON.stringify(newProduct));
    console.log(newProduct.cardName); // 替换原未定义变量的输出
  });
};

方案二：等待异步完成后绑定事件 #

让fill函数返回Promise，确保动态元素创建完成后再执行事件绑定。

1. 修改fillCatalog.js，返回Promise：

const row = document.querySelector('.catalog__row');

export const fill = function (brand) {
  return fetch(`./data/${brand}.json`)
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      let products = [...data.products];
      products.forEach(product => {
        row.insertAdjacentHTML(
          'afterbegin',
          ` <a class="catalog__link" href="#" >
              <div class="catalog__product">
              <div class="catalog__product-img">
              <img class="catalog__productImg" src=${product['img-src']} alt="" srcset="" />
              </div>
              <h3 class="catalog__product-model">${product['model']}</h3>
              <p class="catalog__product-brand">${product['brand']}</p>
              <span class="catalog__product-price">${product['price']}</span>
          </div></a>`
        );
      });
    });
};

2. 修改loadContent.js，等待异步完成后调用productSave：

import { fill } from './fillCatalog.js';
import { productSave } from './productSave.js';

fill('jordans').then(() => {
  productSave();
});

3. 修改productSave.js，移除无效的DOMContentLoaded监听：

class Product {
  constructor(cardImg, cardName, cardBrand = '', cardPrice) {
    this.cardImg = cardImg;
    this.cardName = cardName;
    this.cardBrand = cardBrand;
    this.cardPrice = cardPrice;
  }
}

export const productSave = function () {
  const links = document.querySelectorAll('.catalog__link');
  links.forEach(link => {
    link.addEventListener('click', e => {
      e.preventDefault();
      const productItem = link.querySelector('.catalog__product');
      const newProduct = new Product(
        productItem.querySelector('.catalog__productImg').src,
        productItem.querySelector('.catalog__product-model').textContent,
        productItem.querySelector('.catalog__product-brand').textContent,
        productItem.querySelector('.catalog__product-price').textContent.replace(/\D/g, '')
      );
      localStorage.setItem('newCard', JSON.stringify(newProduct));
      console.log(newProduct.cardName);
    });
  });
};

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