Jquery 带有 onclick 的元素内联字符串

Question

以下代码无效：

  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>)').on('click', () => console.log('Test')).html()}
        </td>
      </tr>
    `
    )
    .join('');

最后使用 html() 函数，按钮元素将不会被渲染。当我将按钮包装到另一个元素中时，按钮将被渲染，但 onclick 功能不起作用。

此代码来自我尝试创建的 chrome 扩展。

你知道我如何在将按钮添加到 dom 后使用 onclick 渲染按钮而不添加事件侦听吗？

Answer 1

.html() 不会转换通过 .on() 添加的侦听器，但是使用 html 属性侦听器无论如何都不会在扩展中工作，因为它被默认禁止用于扩展的 CSP，more info.
当有很多相似元素时，最好使用事件委托：在公共父元素上只附加一个侦听器。

可以将整个table构造一个html字符串，传递给jQuery，然后添加一个监听器：

const table = $(`
  <table>${targets.map(t => `
    <tr>
      <td>${t.name}</td>
      <td>${t.coordinates.join(':')}</td>
      <td>${new Date(t.lastscan).toLocaleString()}</td>
      <td>
        <button class="icon_nf icon_espionage" type="submit"></button>
      </td>
    </tr>
  `).join('')}
  </table>
`).on('click', 'button', e => console.log('Test', e.target));

Jquery 带有 onclick 的元素内联字符串

Jquery element with onclick to inline string

html

javascript

jquery

google-chrome-extension