添加 onclick 事件以动态创建元素答案

【问题标题】：add onclick event to dynamically create element添加 onclick 事件以动态创建元素
【发布时间】：2023-03-06 07:25:01
【问题描述】：

我想创建 div 列表，其中一个 div 应该是这样的：

<div onclick="myFunc(this, 'arrayValue')"></div>

我想通过遍历我的数组并将索引值传递给我的函数来实现它。一种有效的解决方案是使用setAttribute：

  for(var i = 0; i < array.length; i++){
    var div = document.createElement("div");
    div.setAttribute("onclick", 'myFunc(this, \''+array[i]+'\')');
    myDiv.appendChild(div);
  }

唯一的问题是这部分看起来真的很难看：\''+array[i]+'\')' 还有其他方法可以实现这一目标吗？看起来像这样或类似的东西：

    div.setAttribute("onclick", myFunc(this, array[i]);

顺便说一句。其他解决方案：当我使用div.onclick 时，onclick attr 在 div 上不可见（结果：<div></div>），可能是我做错了什么。

【问题讨论】：

onClick event in a For loop的可能重复
"...这部分看起来真的很难看" 部分使它更适合代码审查。
"其他解决方案" 部分将成为主题，如果您展示了您的实际操作并描述了错误以及您的意思 "...attr不可见”。但是，它几乎肯定是重复的。
developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
@squint Attr 不可见 == <div></div>，另一方面 attr 可见 == <div onclick="myFunc(this, 'arrayValue')"></div>

标签： javascript jquery

【解决方案1】：

var array = ['bla1','bla2'];

var myFunc = function(value) {
  alert('click : '+ value);
};

var myDiv = document.getElementById('myDiv');

for(var i = 0; i < array.length; i++){
    var div = document.createElement("div");
    div.className = 'bla';
    myDiv.appendChild(div);
  
  div.addEventListener('click', myFunc.bind(this, array[i]));
}

.bla {
  border: 1px solid black;
  width: 20px;
  height: 20px;
  margin: 10px;
  }

&lt;div id="myDiv"&gt;&lt;/div&gt;

这是你想要的吗？

【讨论】：