在innerHTML生成的div上单击事件

Question

我有一个＆＃39; div＆＃39; javascript中生成的元素与＆＃39; innerHTML＆＃39;属性。

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

无论如何onclick事件无效。

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

有什么问题？我该如何解决它（纯javascript，没有库）？

Answer 1

在将innerhtml添加到外部html

之后，需要将该id与函数绑定

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

添加innerHTML

之后

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

这样可行。

Answer 2

请致电此功能：

public class Bar extends Foo {
    public void method(String someClass) throws ClassNotFoundException {
        Class.forName(someClass);
    }
}

在

之后

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

Answer 3

您可以在（...）指示的代码中委托侦听您在其中内部编写div的父级的事件。 这将处理（...）中触发的事件，您可以执行以event.target.id为条件的操作===＆＃39; a＆＃39;

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

这样你就不必担心，当你附加听众时，你是否已经创建了div。 另外，要注册事件处理程序，我建议正确的事件句柄注册（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener）

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/

Answer 5

Javascript - 没有库

var div = document.getElementById('1');
    
div.onclick = function(event) {
  if(div.innerHTML == 'Click here'){
    div.innerHTML = '<b>I like this!</b>';
  }else{
    div.innerHTML = 'Click here';
  }
}
    

<div id="1">Click here</div>

jQuery

var div = $('#1')

div.on('click',function(event){
  if(div.html() == 'Click me'){
    div.html('<b>I like this</b>');
  }else{
    div.html('Click me');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1">Click me</div>