基于JQuery实现Copy按钮对应触发指定函数的技术问询

核心思路 #

因为盒子是动态生成的，直接绑定事件会失效，所以得用事件委托。另外要根据Copy按钮所在盒子的顺序，对应调用CopyA、CopyB这类函数，关键是拿到盒子的索引来匹配对应的函数。

实现代码 #

// 把事件委托给盒子的静态容器（比如你所有盒子的父元素，假设类名叫.box-container）
$('.box-container').on('click', '.copy-btn', function() {
    // 找到当前按钮所在的盒子，拿到它在容器里的索引（从0开始算）
    const boxIndex = $(this).closest('.box').index();
    // 根据索引调用对应的复制函数
    switch(boxIndex) {
        case 0:
            CopyA();
            break;
        case 1:
            CopyB();
            break;
        case 2:
            CopyC();
            break;
        // 有更多盒子就继续加case就行
        default:
            console.log('没有对应的复制函数');
            break;
    }
});

注意事项 #

• 替换代码里的.box-container和.box为你实际项目中的容器类名和盒子类名。
• 事件委托的原理是利用事件冒泡，把事件绑定到页面加载时就存在的父元素上，这样后续动态生成的子元素触发事件时，父元素能捕获到并执行回调。

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