Chrome扩展中如何将带点击事件的jQuery元素转为内联HTML字符串

问题根源 #

• 你调用.html()获取的是jQuery元素的内部HTML内容，你创建的是空button元素，内部没有内容，所以调用.html()只会返回空字符串，自然渲染不出按钮
• 即使你改成获取.outerHTML拿到完整的button标签字符串，jQuery绑定的click事件是挂载在内存中的DOM节点对象上的，转成普通HTML字符串后事件绑定会直接丢失，插入页面后自然不会触发点击逻辑

可行实现方案 #

方案1：直接操作DOM节点而非拼接HTML字符串（完全满足需求，无需插入后单独绑定事件） #

全程操作DOM对象，事件绑定会完整保留，最后直接把生成的行插入表格即可，示例代码：

// 假设你要插入的表格tbody容器是$tableTbody，先清空旧内容
$tableTbody.empty()
targets.forEach(target => {
  // 创建行节点
  const $tr = $('<tr></tr>')
  // 插入各列
  $tr.append(`<td>${target.name}</td>`)
  $tr.append(`<td>${target.coordinates.join(':')}</td>`)
  $tr.append(`<td>${new Date(target.lastscan).toLocaleString()}</td>`)
  // 创建带事件的按钮直接插入列
  const $btn = $('<button class="icon_nf icon_espionage" type="submit"></button>')
    .on('click', () => console.log('Test'))
  $tr.append($('<td></td>').append($btn))
  // 把整行插入表格
  $tableTbody.append($tr)
})

方案2：使用事件委托（无需给每个按钮单独绑定事件，性能更优） #

不需要给每个动态生成的按钮绑定事件，提前给按钮的父容器（比如表格的tbody）绑定一次事件即可，后续插入的所有符合选择器的按钮都会自动触发逻辑，这种方案你依然可以用原来的字符串拼接方式渲染：

// 提前给表格容器绑定事件，只需执行一次，不管后续什么时候插入按钮都生效
$('tbody').on('click', '.icon_espionage', function() {
  console.log('Test')
})

// 原来的拼接逻辑只要正常输出按钮标签就行，不用绑事件
return targets
  .map(
    (target, i) => `
    <tr>
      <td>${target.name}</td>
      <td>${target.coordinates.join(':')}</td>
      <td>${new Date(target.lastscan).toLocaleString()}</td>
      <td>
        <button class="icon_nf icon_espionage" type="submit"></button>
      </td>
    </tr>
  `
  )
  .join('');

两种方案都符合要求，方案1更适合每个按钮的点击逻辑差异较大的场景，方案2性能更优，适合所有按钮的点击逻辑统一的场景。

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