如何在网页中复用带加载动画的提交按钮脚本？

问题背景 #

已知HTML中ID必须唯一，现有带加载动画（spinner）的提交按钮及配套的数百行JavaScript逻辑，需要在同一页面添加多个此类按钮，但不想重复复制脚本代码，寻求高效复用方案。

修改后的HTML结构 #

移除所有ID，改用类选择器，并通过data-*属性传递每个按钮的专属参数：

<button class="submit-button" data-details="<?php echo SOME_DETAILS_1; ?>">
    <div class="spinner hidden"></div>
    <span class="button-text">Submit Now</span>
</button>

<button class="submit-button" data-details="<?php echo SOME_DETAILS_2; ?>">
    <div class="spinner hidden"></div>
    <span class="button-text">Submit Now</span>
</button>

复用的JavaScript逻辑 #

将原有逻辑封装为通用函数，通过事件委托实现所有按钮的统一处理，无需重复绑定事件：

// 通用提交处理函数：接收目标按钮元素作为参数
function handleSubmit(button) {
    // 从当前按钮内部查找对应的加载动画和文本节点
    const spinner = button.querySelector('.spinner');
    const buttonText = button.querySelector('.button-text');
    // 获取按钮专属参数
    const details = button.dataset.details;
    const myConst = MyNUM(details);

    // 显示加载状态（原有逻辑保留）
    spinner.classList.remove('hidden');
    buttonText.textContent = 'Submitting...';
    button.disabled = true;

    // --------------------------
    // 这里放入你原有的数百行提交逻辑
    // 比如AJAX请求、状态处理等，只需确保所有元素查找都基于当前button
    // --------------------------

    // 示例：模拟请求完成后的状态重置
    setTimeout(() => {
        buttonText.textContent = 'Submit Now';
        spinner.classList.add('hidden');
        button.disabled = false;
    }, 1500);
}

// 事件委托：仅绑定一次事件，处理所有提交按钮的点击
document.addEventListener('click', function(e) {
    // 找到点击事件所属的提交按钮（支持点击按钮内部子元素的情况）
    const targetButton = e.target.closest('.submit-button');
    if (targetButton) {
        handleSubmit(targetButton);
    }
});

核心优化点 #

• 移除ID依赖：用类选择器替代ID，避免重复ID冲突，同时保证结构一致性
• 参数传递：通过data-details属性传递每个按钮的专属配置（如PHP输出的变量）
• 逻辑封装：将原有数百行逻辑封装到通用函数中，仅需针对当前按钮元素做相对查找，无需修改核心逻辑
• 事件委托：仅绑定一次全局事件，支持动态新增按钮（后续通过JS添加的按钮也能自动生效）

内容的提问来源于stack exchange，提问作者Aquaholic