Tengo el siguiente código que representa una HTML Table y, después de hacer clic en el botón, onClick una HTML Table más.

El problema es que la segunda tabla no escucha la Función aplicada a la primera tabla que resalta las celdas.

Estoy tratando de averiguar si hay algo que impide que la segunda tabla también escuche el código del script.

Cualquier idea sería muy apreciada.

El estilo CSS es:

 table,tr,th{ border:2px solid black; } table{ width:200px; height:200px; } th.highlight { background-color: black; }

La tabla HTML se ve así:

 <table id="test"> <tr><th>test</th><th>test</th><th>test</th></tr> <tr><th>test</th><th>test</th><th>test</th></tr> <tr><th>test</th><th>test</th><th>test</th></tr> </table> <div id="test2"> </div> <button type="button">Add</button>

Y el Script que se aplica a la primera tabla pero no funciona en la segunda:

 const addColumn = () => { var x = document.getElementById("test2"); x.innerHTML = "<table> <tr><th>test2</th><th>test2</th><th>test2</th></tr> <tr> <th>test2</th><th>test2</th><th>test2</th></tr> <tr><th>test2</th><th>test2</th> <th>test2</th></tr></table>"; } document.querySelector('button').onclick = addColumn $('th').hover(function() { $(this).addClass('highlight'); }, function() { $(this).removeClass('highlight'); });