优化动态HTML中的JavaScript：告别内联脚本，拥抱事件委托

<!-- 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>
<script>
    // 为每个动态生成的商品表单绑定提交事件
    document.addEventListener("DOMContentLoaded",() =>{
        const product${index} = document.querySelector("#productId_${index}")
        // 注意：原始代码中此处可能存在变量引用错误，应为product${index}
        product${index}.addEventListener("submit",e=>{
            e.preventDefault(); // 阻止表单默认提交
            var formId = "productId_${index}";
            productList(formId); // 调用业务逻辑函数
        });
    });
</script>
<!-- END product -->

// 在页面加载后（或getWidgets函数调用后）执行一次
$(document).ready(function() { // 或者使用 $(function() { ... });
    $('#widgetContainer').on('submit', 'form.product', function (e) {
      e.preventDefault(); // 阻止表单默认提交行为，防止页面刷新

      // $(this) 在事件委托中指向实际触发事件的元素，即当前的 'form.product'
      // 获取触发事件的表单的父元素的ID (例如：productId_0, productId_1)
      const formId = $(this).parent().attr('id');

      // 调用业务逻辑函数，传入表单ID
      productList(formId);
    });
});

// 假设 productList(formId) 是一个已经定义好的处理函数
function productList(formId) {
    console.log("Form submitted for:", formId);
    // 在这里处理表单数据，例如通过AJAX发送
    // var formData = $('#' + formId + ' form.product').serialize();
    // $.post('/api/submitProduct', formData, function(response){ ... });
}

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

    function getSuccess(obj){
        var dataWidget = obj.data;
        var widgetContainer = $("#widgetContainer"); // 缓存jQuery对象以提高性能

        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" 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 -->`;

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

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

// 确保在DOM加载完成后，并且 #widgetContainer 存在时绑定事件
$(document).ready(function() {
    getWidgets(); // 调用函数生成动态内容

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