el siguiente código no funciona:
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(''); Con la función html() al final, el elemento del botón no se representará. Cuando envuelvo el botón en otro elemento, el botón se representará, pero la función onclick no funciona.
Este código proviene de mi extensión de Chrome que intento crear.
¿Sabes cómo puedo renderizar un botón con un clic sin agregar un evento de escucha después de agregar el botón al dom?
.html() no convertirá los oyentes agregados a través .on() , pero el uso de oyentes de atributos html no funcionará en extensiones de todos modos porque está prohibido por el CSP predeterminado para extensiones, más información .
Cuando hay muchos elementos similares, es mejor usar la delegación de eventos: adjunte solo un oyente en el elemento principal común.
Puede construir una cadena html de toda la tabla, pasarla a jQuery y luego agregar un oyente:
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));