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?

woxxom · Accepted Answer · 2021-10-15 07:31:05Z

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

answered Oct 15, 2021 at 7:31

woxxom

75.2k15 gold badges161 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery element with onclick to inline string

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related