帶有 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));