生成的 innerHTML 上的点击事件 div

Question

我在 javascript 中使用 'innerHTML' 属性生成了一个 'div' 元素。

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

无论如何，onclick 事件不起作用。

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

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

Answer 1

请调用此函数：

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

就在

之后

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

Answer 2

您可以在您的代码中将事件委托给您正在对 div 进行 innerHTML 处理的父级，由 (...) 指示。这将处理 (...) 中触发的事件，您可以执行条件为 event.target.id === 'a'

的操作

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

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

Answer 3

在将内部 html 添加到外部 html

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

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

刚刚添加了 innerHTML

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

这会起作用。

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>

Answer 6

你可以直接在innerHTML字符串中使用onclick事件，我建议你使用模板文字而不是单引号

(...).innerHTML = `sometext <div id="a" onclick="someFunction('${data}')">word</div> ${obj.something} ${othertext}`;

您可以将动态或静态数据传递到函数中。上面的示例传递动态数据，其中数据代表一个变量。要传递静态数据，只需在没有 ${} 的情况下执行即可，例如

someFunction('data');

生成的 innerHTML 上的点击事件 div

click event on innerHTML generated div

javascript

click

Javascript - 没有图书馆

jQuery