JavaScript create 元素，然后添加它一个事件

JavaScript create element then add it an event

本文关键字：一个 事件 元素 create 然后 添加 JavaScript      更新时间：2023-09-26

我正在尝试创建一个元素（没有 DOM 或 jQ 请），然后应用它一个偶数...新创建的元素正确显示，javascript 工作...

var dato = "";
    dato += "<div id='todas'>";
    dato += "<img src=/logos/todos_generos.jpg>";
    dato += "<span>Todas</span>";
    dato += "</div>";
    document.getElementById('generos').innerHTML += dato;
    document.getElementById("todas").onclick = myFunction;

function myFunction(){
alert("This is not working");
}

但是如果以后我也使用 innerHTML 添加另一个元素，以前的元素 JS 将停止工作： 

var dato = "";
    dato += "<div id='someRandom'>";
    dato += "<img src=/logos/todos_generos.jpg>";
    dato += "<span>Todas</span>";
    dato += "</div>";
    document.getElementById('generos').innerHTML += dato;
    document.getElementById("todas").onclick = myFunction;

我听说innerHTML在已经创建的元素上存在问题，这应该通过附加子元素来完成，但这太大而无法正确管理。

你可以insertAdjacentHTML()，它的工作原理类似，但不会破坏现有元素：

document.getElementById('generos').insertAdjacentHTML( 'beforeend', dato );

innerHTML的工作方式基本上是：

  • 以字符串形式获取所有 HTML 内容
  • 附加新字符串
  • 将结果作为内容写回元素

将现有元素转换回文本时，显然会丢失所有分配的事件处理程序。

不要使用 innerHTML ，它会删除以前绑定到元素的所有事件处理程序。您可以使用insertAdjacentHTML方法来保留事件：

var dato = "";
    dato += "<div id='someRandom'>";
    dato += "<img src=/logos/todos_generos.jpg>";
    dato += "<span>Todas</span>";
    dato += "</div>";
document.getElementById('generos').insertAdjacentHTML('beforeend', dato);

另一种解决方案是使用appendChild方法手动附加新元素，但这更详细： 

var div = document.createElement('div');
div.innerHTML = dato;
document.getElementById('generos').appendChild(div);
相关文章：