关于动态生成的行内元素添加事件问题

Posted 2020-11-21 shenwh

平时工作中会遇到动态给某个div加子元素，有时候为了简便，直接如下写法：

var oBox = document.getElementById(‘box‘);

oBox .innerhtml = ‘<button onclick="change();">子元素</button>‘;

还顺便给子元素添加了一个点击事件，但发现当我们再外面定义了change函数之后，点击按钮报错，change is not defined！可想而知，这种动态添加子元素的方法是无法添加事件的，解决如下：

var oBox = document.getElementById(‘box‘);

var oButton = document.createElement(‘button‘);

oBox .appendChild(oButton );

oButton .onclick = function(){....};

这样子生成的元素才会有效，事件才得以添加执行！