动态生成HTML元素的高效JavaScript事件绑定：事件委托机制详解

// ... 在getWidgets函数内部的循环中
var template =`<!-- product -->
<div class="container" class="product" id="productId_${index}">
    <form action="" class="product">
        <!-- ... 商品详情 ... -->
        <button class="submit">Add to cart</button>
    </form>
</div>
<script>
            document.addEventListener("DOMContentLoaded",() =>{ // 注意：在动态添加的HTML中，DOMContentLoaded可能不会按预期工作
                const product${index} = document.querySelector("#productId_${index}")
                product1.addEventListener("submit",e=>{
                    e.preventDefault();
                    var formId = "productId_${index}";
                    productList(formId);
                });
            });
</script>
<!-- END product -->`

$("#widgetContainer").append(template);
// ...

// 确保在DOM加载完成后执行此代码，且只执行一次
$(document).ready(function() {
    // 为 #widgetContainer 元素绑定一个“submit”事件监听器
    // 该监听器将只响应其内部 class 为 "product" 的 <form> 元素的 submit 事件
    $('#widgetContainer').on('submit', 'form.product', function (e) {
        e.preventDefault(); // 阻止表单默认的提交行为，防止页面刷新

        // $(this) 在事件委托中指向实际触发事件的元素，即当前的 <form class="product">
        // .parent() 获取其父元素 (即 <div class="container">)
        // .attr('id') 获取该父元素的 ID
        const formId = $(this).parent().attr('id');

        // 调用预定义的业务逻辑函数，处理表单数据
        productList(formId);
    });
});

// 假设productList函数已经定义
function productList(formId) {
    console.log("Processing form with ID:", formId);
    // 这里可以添加AJAX请求或其他业务逻辑
    // 示例：获取表单数据并发送
    const form = document.querySelector(`#${formId} form.product`);
    if (form) {
        const productId = form.querySelector('.productId').value;
        const price = form.querySelector('.price').value;
        const quantity = form.querySelector('.quantity').value;
        console.log(`Product ID: ${productId}, Price: ${price}, Quantity: ${quantity}`);
        // 实际应用中，这里会发送AJAX请求
    }
}

function getWidgets(){
    var listUrl = base_url + widgetsPath + url_auth;

    console.log("Sending GET to " + listUrl);

    function getSuccess(obj){
        var dataWidget = obj.data;
        $("#widgetContainer").empty(); // 清空现有内容，避免重复添加
        for (let i=0; i< dataWidget.length; i++){
            var id = dataWidget[i].id;
            var description = dataWidget[i].description;
            var price = dataWidget[i].pence_price;
            var url = dataWidget[i].url;
            var index = i;

            var template =`<!-- product -->
            <div class="container" class="product" id="productId_${index}">
                <form action="" class="product">
                    <img src="${url}"></img>
                    <p class="product_Description">${description}</p>
                    <input type="hidden" class="productId" value=${id}>
                    <input type="hidden" class="price" value="0.${price}">
                    <label for="quantity">Quantity:</label>
                    <input type="number" class="quantity" value="1" min="1">
                    <button class="submit">Add to cart</button>
                </form>
            </div>
            <!-- END product -->`; // 注意：这里移除了动态的 <script> 标签

            $("#widgetContainer").append(template);
        }
        console.log("success");
        console.log(dataWidget);
    };

    $.ajax(listUrl, {type: "GET", data: {},success: getSuccess });
};

// 在DOM加载完成后，只绑定一次事件委托
$(document).ready(function() {
    // 调用函数获取并渲染动态内容
    getWidgets();

    // 绑定事件委托
    $('#widgetContainer').on('submit', 'form.product', function (e) {
        e.preventDefault();
        const formId = $(this).parent().attr('id');
        productList(formId);
    });
});

document.addEventListener('DOMContentLoaded', function() {
    // 调用函数获取并渲染动态内容
    getWidgets(); // 假设 getWidgets 函数如上所示，但不包含动态脚本

    const widgetContainer = document.getElementById('widgetContainer');

    if (widgetContainer) {
        widgetContainer.addEventListener('submit', function(e) {
            // 检查事件是否来源于 <form class="product">
            // e.target 是实际触发事件的元素
            // .matches() 方法检查元素是否匹配给定的CSS选择器
            if (e.target.matches('form.product')) {
                e.preventDefault();

                // e.target 是 <form class="product"> 元素
                // .closest('.container') 向上查找最近的 class 为 'container' 的祖先元素
                const formId = e.target.closest('.container').id;
                productList(formId);
            }
        });
    }
});