for循环生成button标签时如何设置动态id 解决copy-link-message仅首按钮生效问题

问题原因 #

你给所有复制按钮设置了相同的id属性，而HTML规范中id是全局唯一标识，使用$("#copy-link-message")选择器只能匹配到页面中第一个出现的该id元素，所以只有顶部按钮的点击事件生效。

修改方案 #

步骤1：替换重复id为通用类名 #

把模板中所有content_copy按钮的id="copy-link-message"属性删除，给按钮新增专属类名copy-link-btn，修改示例：
文件夹对应的复制按钮修改后：

<button class="mdui-textfield-icon mdui-btn mdui-btn-icon dummyclass copy-link-btn" onclick="(function setClipboard(value) {var tempInput = document.createElement('input');tempInput.style = 'position: absolute; left: -1000px; top: -1000px';tempInput.value = value;document.body.appendChild(tempInput);tempInput.select();document.execCommand('copy');document.body.removeChild(tempInput);})(window.location.protocol + '//' + window.location.hostname + '${p}')" style="float: right;">
  <i class="mdui-icon material-icons dummyclass">content_copy</i>
</button>

文件对应的复制按钮同理修改，加上copy-link-btn类、删除id属性即可。

步骤2：改用事件委托绑定点击事件 #

删除append_files_to_list函数末尾的原事件绑定代码：

$("#copy-link-message").on("click", () => {
    mdui.snackbar("Copied to clipboard!");
});

改为在页面初始化阶段（函数外部）绑定一次全局委托事件，适配所有动态生成的按钮：

// 委托给页面初始就存在的父容器#list，所有后续新增的.copy-link-btn都会触发该事件
$("#list").on("click", ".copy-link-btn", () => {
    mdui.snackbar("已复制到剪贴板！");
});

可选优化 #

你可以把复制逻辑抽成公共函数，简化模板冗余代码：

// 全局公共复制函数
function copyToClipboard(link) {
  const tempInput = document.createElement('input');
  tempInput.style = 'position: absolute; left: -1000px; top: -1000px';
  tempInput.value = `${window.location.protocol}//${window.location.hostname}${link}`;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand('copy');
  document.body.removeChild(tempInput);
}

之后模板中的按钮onclick属性可以简化为：

• 文件夹按钮：onclick="copyToClipboard('${p}')"
• 文件按钮：onclick="copyToClipboard('${ddl_link}')"

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