Jquery element with onclick to inline string

Question

the following code is not working:

  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('');

With the html() function at the end the button element will not be rendered. When i wrap the button into another element the button will be rendered, but the onclick function is not working.

This code comes from my chrome extension i try to create.

Do you know how i can render a button with onclick without adding a event listenes after i added the button to the dom?

Answer 1

1. .html() won't convert listeners added via .on() , but using html attribute listeners won't work in extensions anyway because it's forbidden by the default CSP for extensions, more info .

2. When there are lots of similar elements it's best to use event delegation: attach just one listener on the common parent element.

You can construct an html string of the entire table, pass it to jQuery, then add a listener:

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