尝试链接到其他页面时Javascript事件侦听器不工作

我目前正试图根据用户在products.html页面上单击的内容显示一个单独的.html页面。例如，单击product1将显示product1的单个页面，单击product2将显示product2的单个页面，等等

我目前在app.js文件中有一个UI类，它保存了显示信息的逻辑。 其中有一个名为

displayIndividualProject（）

的函数，该函数有一个事件侦听器，它说，“如果单击了一张卡（

If（event.target.classList.contains（'img-container'））”）

），然后将此HTML结构注入到单独的.HTML”页面中。然而，在我点击它之后，它并没有注入序列

另外，

displayIndividualProduct

用于individual.html页面，而

displayProducts

用于product.html页面

下面是我的UI类的一部分：

const individualProductsDOM = document.querySelector('.single-product');

class UI{
       displayIndividualProduct(){
    
            document.addEventListener("click", event => {
                if (event.target.classList.contains('img-container'))
                    individualProductsDOM.innerHTML = 
            
                    `
                    <div class='section-title'>
                    <h2>${product.title}</h2>
                  </div>
                  <div class='indi-img-container'>
                      <img src=${product.image} data-id='${product.id} alt="">
                      
        

                  </div>
                  <div class="product-footer">
                      <h3>Estimated Cost: $ <span class='item-total'>0</span></h3>
                      <button class='bag-btn-2' data-id='${product.id}'>
                          <i class='fas fa-shopping-cart'></i>
                          add to cart
                      </button> 
                  </div>
                    `
    
            })
    
            individualProductsDOM.innerHTML += `injected`;
    
            
        }

displayProducts(products){
    let result = '';
    products.forEach(product => {
        result += `
        
            <article class="product" data-id='${product.id}'>
                    <div class='img-container'>
                    <a href='/individual.html'>  
                        <img src=${product.image} alt="product" class='product-img' data-id='${product.id}'>
                        
                        <button class='bag-btn' data-id='${product.id}'>
                            <i class='fas fa-shopping-cart'></i>
                            add to cart
                        </button> 
                        </a>
                    </div>
                
                <h3>${product.title}</h3>
                <h4>$${product.price}/roll</h4>
                
            </article>  
        

         `
    
    });

    //insert the products into the productsDOM
    productsDOM.innerHTML = result; 
}


}

---

任何帮助都将不胜感激

听起来你并不是在一页一页地移动（这是你在问题的第一部分所陈述的）。听起来像是单击会导致当前页面的内容发生更改。请编辑您的问题以澄清。@ScottMarcus我已更新以澄清我的

displayProducts

的外观。基本上，我将我的卡片包装在一个锚标记中，当我单击它时，期望得到的结果是，它将被重定向到一个专门的个人.html页面。

document.addEventListener("DOMContentLoaded", () => {
    const ui = new UI();
    const products = new Products();

    // setup app
    ui.setupAPP();


    //get all products
    products.getProducts().then(products => {
        //first display, then save, and then connect the add cart buttons
        ui.displayProducts(products);
        Storage.saveProducts(products);
    }).then( () => {
        ui.getBagButtons();
    });

    ui.displayIndividualProduct();



});