点击产生的innerHTML DIV事件(click event on innerHTML gene

我在“的innerHTML”属性的JavaScript产生一个“DIV”元素。

(...).innerHTML = 'sometext'+'<div id=\"a\">word</div>'+obj.something+'othertext';

反正onclick事件无法正常工作。

document.getElementById('a').onclick = function() {
    //do something
}

问题是什么？ 我该如何解决这个问题（纯JavaScript，没有库）？

Answer 1:

你可以委托时听父母，你是innerHTML的-ING的股利，由（...）表示YOUT代码。 这将处理（...）中触发的事件，你可以进行调节，以event.target.id ===行动“A”

(...).onclick = function(event) {
    if (event.target.id === 'a') {
    //Do your stuff
    }
}

这样，您不必担心，如果，当你装上监听器，你已经创建了DIV dinamically与否。 此外，注册事件处理程序，我建议适当的事件句柄登记（ https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener ）

Answer 2:

您需要在ID绑定与功能您添加的innerHTML到外部HTML后

function bindingFunction(){
    document.getElementById('a').onclick = function() {
//     Your code
    }
}

只需添加后的innerHTML

(...).innerHTML = 'sometext'+'<div id=\"a\">word</div>'+obj.something+'othertext';
bindingFunction();

这将工作。

Answer 3:

请调用这个函数：

document.getElementById('a').onclick = function() {
    //do something
}

刚过了

(...).innerHTML = 'sometext'+'<div id=\"a\">word</div>'+obj.something+'othertext';

Answer 4:

工作实例：

JavaScript代码

document.getElementById('resultDiv').innerHTML = '<div id=\"a\">Test onclick</div>';

document.getElementById('a').onclick = function() {
    alert("Click Event Fired !")
}

演示给你： https://jsfiddle.net/be3a90gw/4/

文章来源: click event on innerHTML generated div