JavaScript onclick事件从动态生成的html元素中获取了错误的ID [英] JavaScript onclick event gets the wrong id from dynamically generated html element

问题描述

我在NodeJS应用程序中使用mongodb和ejs，创建了一个功能，该功能循环购物车中的产品，并在表格内的页面上动态显示其中的每个产品.

Using mongodb and ejs in a NodeJS application, I have created a function that loops through products in the shopping cart and dynamically shows each one of them on the page, inside a table.

我正在尝试创建一个数量更新功能，该功能使用一个输入字段来获取数量和一个用于更新数据库的按钮.

I am trying to create a quantity update function that uses an input field to take the quantity and a button to update the database.

我的HTML:

<tbody class="product-container">
    <!-- loop through each product -->
    <%  products.forEach (function(element) { %>
        <tr valign="top" class="cart-p-list">
            <!-- get individual unique ID for each product -->
            <input type="hidden" class="id" value="<%= element.item._id %>">

            <td class="col-qty cart-p-qty nowrap" align="right">
                <div class="proopc-input-append">
                    <!-- input for quantity and update button -->
                    <input type="number" class="input-ultra-mini proopc-qty-input qty" size="1" maxlength="4" name="quantity" value="<%= element.qty %>" data-quantity="<%= element.qty %>" step="1" min="1" max="50">
                    <button class="proopc-btn proopc-task-updateqty updateproduct" name="updatecart.0" title="Update Quantity In Cart"><i class="proopc-icon-refresh"></i></button>
                </div>
            </td>
        </tr>
        <% }); %>

出于测试目的，javascript位于页面底部的< script> 标记中.

For test purposes, the javascript is in a <script> tag at the bottom of the page.

我的JavaScript代码:

My JavaScript code:

window.addEventListener('load', function() {
    {
        // Update Quantity of product in shopping cart
        const block = document.querySelector('.product-container');


        block.addEventListener('click', function(e) {
            if (e.target.classList.contains('updateproduct')) {
                console.log(e);

                let id = e.target.parentNode.parentNode.parentNode.parentNode.querySelector('.id').value;
                let qty = +e.target.parentNode.querySelector('.qty').value;
                console.log(id);

                fetch(`/update/${id}/${qty}`, {
                    method: 'GET'
                }).then((res) => res.text());
            }
        });
    }
});

代码从我的cart.js中获取以下GET请求:

The code fetches the following GET request from my cart.js:

router.get('/update/:id/:qty', function (req, res, next) {
    let productId = req.params.id;
    let quantity = +req.params.qty;

    let cart = new Cart(req.session.cart ? req.session.cart : {});
    cart.update(productId, quantity);
    req.session.cart = cart;
    res.redirect('back');
});

我的购物车型号:

module.exports = function Cart(oldCart) {
    this.items = oldCart.items || {};
    this.totalQty = oldCart.totalQty || 0;
    this.totalPrice = oldCart.totalPrice || 0;

    this.update = function (id, quantity) {
        let currentQuantity = this.items[id].qty;
        let newQuantity = this.items[id].qty = quantity;
        let currentPrice = this.items[id].price;
        let newPrice = this.items[id].item.price * quantity;;
        this.items[id].price = this.items[id].item.price * quantity;
        this.totalQty -= currentQuantity;
        this.totalQty += newQuantity;
        this.totalPrice -= currentPrice;
        this.totalPrice += newPrice;

    };

    this.generateArray = function () {
        let arr = [];
        for (let id in this.items) {
            arr.push(this.items[id]);
        }
        return arr;
    };
};

逻辑工作正常.产品正在更新，价格和数量均正确.总价和数量也正确.

The logic is working fine. The product is being updated, the price and quantity are correct. The total price and quantity are also correct.

但是，如果购物车中有多个产品(两个不同的产品)，如果我尝试更新第二个产品(或不是第一个的任何产品)的数量，则刷新后，而是更新第一个产品.

However, if I have more than one product in the cart (two different products), if I try to update the quantity of the second product (or any product that's not the first one), on refresh, the quantity of the first product is updated instead.

这是因为更新数量的事件侦听器始终采用页面上第一个动态生成的项目的ID，而不是我尝试更新其数量的ID.

This is caused because the eventlistener that updates the quantity, always takes the id of the first dynamically generated item on the page instead of the one that I am trying to update the quantity of.

这一定是由于循环遍历ejs文件中的产品引起的，所以我怀疑我需要在js函数中进行某种循环以获取正确的ID，但是我不确定.

This must be caused because of looping through the products in the ejs file, so I suspect I need to do some sort of looping in the js function to get the correct id, but I am unsure of this.

推荐答案

我想出了一个解决方案.

I figured out a solution.

我创建了一个函数，该函数检查带有类 product-container 的父项( tbody )的子项(在这种情况下为 tr ))，其中已声明更新请求.

I created a function that checks the position of the child (tr in this case) of a parent (tbody with the class product-container in my case) of which the update request was declared.

这是找到索引的循环:

for (let i = 0, len = block.children.length; i < len; i++) {

    (function(index) {
        block.children[i].onclick = function() {
            console.log(index);
        }
    })(i);
}

这就是我在代码中实现它的方式:

This is how I implemented it in my code:

document.addEventListener('DOMContentLoaded', function() {
    {
        // Update Quantity of product in shopping cart
        const block = document.querySelector('.product-container');
        // Fetch an array of all ids
        let ids = document.querySelectorAll('.id');
        // Create a function that shows the index of the child of the parent block
        for (let i = 0, len = block.children.length; i < len; i++) {
            (function(index) {
                block.children[i].onclick = function(e) {
                    if (e.target && e.target.classList.contains('updateproduct')) {
                        // ID now equals the id of the clicked child of the container
                        let id = ids[index].value;
                        let qty = +e.target.parentNode.querySelector('.qty').value;

                        fetch(`/update/${id}/${qty}`, {
                            method: 'GET'
                        }).then((res) => res.text()).then(() => window.history.go());
                    }
                }
            })(i);
        }
    }
});

这篇关于JavaScript onclick事件从动态生成的html元素中获取了错误的ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！