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

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

1. .html()不会转换通过.on()添加的侦听器，但无论如何使用 html 属性侦听器在扩展中都不起作用，因为它被扩展的默认 CSP 禁止，更多信息。

2. 当有很多相似的元素时，最好使用事件委托：在公共父元素上只附加一个侦听器。

你可以构造整个表的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));