在动态生成HTML元素中高效管理JavaScript事件：事件委托实战指南

// ... (部分代码省略)
var template =`<!-- product -->
<div class="container" class="product" id="productId_${index}">
    <form action="" class="product">
        <!-- ... 其他HTML元素 ... -->
        <button class="submit">Add to cart</button>
    </form>
</div>
<script>
            document.addEventListener("DOMContentLoaded",() =>{ // 注意：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);
// ... (部分代码省略)

$(staticParentSelector).on(eventType, dynamicChildSelector, handlerFunction);

// 在页面加载后，且 #widgetContainer 存在时，绑定一次事件委托
$('#widgetContainer').on('submit', 'form.product', function (e) {
  // 阻止表单默认的提交行为（即页面刷新）
  e.preventDefault();

  // 'this' 在事件处理函数中指向触发事件的表单元素（form.product）
  // 获取表单父元素的ID，例如 'productId_0'
  const formId = $(this).parent().attr('id');

  // 调用业务逻辑函数
  productList(formId);
});

<!-- product -->
<div class="container 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 -->

// 假设 productList 函数已定义
function productList(formId) {
    console.log("Form submitted for:", formId);
    // 在这里处理表单数据，例如通过 AJAX 发送
    // var formData = $('#' + formId).find('form').serialize();
    // console.log(formData);
    // $.post('/api/add-to-cart', formData, function(response) {
    //     console.log('Added to cart:', response);
    // });
}

// 绑定事件委托，在 DOM 加载完成后执行一次
$(document).ready(function() {
    $('#widgetContainer').on('submit', 'form.product', function (e) {
        e.preventDefault(); // 阻止表单默认提交行为

        // 获取触发事件的表单的父元素的ID
        const formId = $(this).parent().attr('id');
        productList(formId);
    });

    // 初始加载商品数据
    getWidgets();
});


function getWidgets(){
    var listUrl = base_url + widgetsPath + url_auth;
    console.log("Sending GET to " + listUrl);

    function getSuccess(obj){
        var dataWidget = obj.data;

        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;

            console.log("index: ",i);
            console.log(dataWidget[i].id);
            console.log(dataWidget[i].description);
            console.log(dataWidget[i].pence_price);
            console.log(dataWidget[i].url);
            console.log(" ");

            // 使用修改后的模板，不再包含内联 <script>
            var template =`<!-- product -->
            <div class="container 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 -->`;

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

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

// 确保 base_url, widgetsPath, url_auth 已定义
// 例如:
// const base_url = "http://example.com/";
// const widgetsPath = "api/widgets/";
// const url_auth = "?auth=token123";