网站多图片下载按钮失效求助：仅首图可重复下载

问题原因 #

1. 唯一ID限制：原代码用document.getElementById('downloadImage')获取按钮，但动态生成的下载按钮未设置该ID，且ID是唯一标识，仅能绑定第一个按钮的点击事件，后续按钮无事件绑定。
2. URL变量复用：imgurl仅保存了第一张图片的URL，所有点击事件都会使用这个固定值，导致下载的始终是第一张图。
3. 静态事件绑定无效：动态生成的DOM元素无法通过静态addEventListener绑定事件，必须用事件委托或生成时绑定。

修复方案 #

1. 给每个下载按钮添加统一类名（如download-btn），并通过data-url自定义属性存储对应图片的URL。
2. 使用事件委托，将点击事件绑定到静态父元素（如表格tbody）上，确保动态生成的按钮也能触发事件。
3. 移除原代码中静态绑定事件的逻辑，在事件委托的回调中获取当前按钮对应的图片URL，调用下载函数。

完整修复代码 #

// 替换为你的实际图片URL数据源
const imageUrls = ['https://example.com/img1.jpg', 'https://example.com/img2.jpg', 'https://example.com/img3.jpg'];

// 循环生成图片及对应下载按钮
imageUrls.forEach(url => {
  const newHtml = `
    <tr>
      <td>
        <img src="${url}" class="center">
        <a href="#" class="download-btn" data-url="${url}">download</a>
      </td>
    </tr>
  `;
  $('#List').find('tbody').append(newHtml);
});

// 事件委托绑定下载点击事件
$('#List tbody').on('click', '.download-btn', function(event) {
  event.preventDefault();
  const targetUrl = $(this).data('url');
  downloadImage(targetUrl);
});

function downloadImage(url) {
  fetch(url, {
    mode: 'no-cors',
  })
  .then(response => response.blob())
  .then(blob => {
    const blobUrl = window.URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    downloadLink.download = url.replace(/^.*[\\\/]/, '');
    downloadLink.href = blobUrl;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
    // 释放Blob URL资源，避免内存泄漏
    window.URL.revokeObjectURL(blobUrl);
  })
  .catch(error => {
    console.error('图片下载失败:', error);
  });
}

额外优化点 #

• 添加错误捕获catch块，便于排查下载失败原因。
• 调用window.URL.revokeObjectURL释放Blob URL，防止内存泄漏。
• 使用模板字符串拼接HTML，比传统字符串拼接更易读维护。

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