Javascript events AFUI列表动态创建的列表元素不允许我有单击事件

我正在尝试将单击处理程序附加到我动态创建并添加到li元素的元素。当我尝试将它附加到li元素时，它不起作用。但是，当我尝试将其添加到更高级别的div甚至ul元素时，click处理程序就会工作

这不会给我我的点击事件：

var ul = document.createElement('ul');
ul.setAttribute('class','list');
main_div.appendChild(ul);

var li = document.createElement('li');
ul.appendChild(li);

var checkbox = document.createElement('div');
checkbox.setAttribute('class','checkBtn-unselected');
checkbox.onclick = function(){alert('foo');};
li.appendChild(checkbox);

var ul = document.createElement('ul');
ul.setAttribute('class','list');
main_div.appendChild(ul);

var li = document.createElement('li');
ul.appendChild(li);

var checkbox = document.createElement('div');
checkbox.setAttribute('class','checkBtn-unselected');
checkbox.onclick = function(){alert('foo');};
ul.appendChild(checkbox);

这确实为我提供了单击事件：

var ul = document.createElement('ul');
ul.setAttribute('class','list');
main_div.appendChild(ul);

var li = document.createElement('li');
ul.appendChild(li);

var checkbox = document.createElement('div');
checkbox.setAttribute('class','checkBtn-unselected');
checkbox.onclick = function(){alert('foo');};
li.appendChild(checkbox);

var ul = document.createElement('ul');
ul.setAttribute('class','list');
main_div.appendChild(ul);

var li = document.createElement('li');
ul.appendChild(li);

var checkbox = document.createElement('div');
checkbox.setAttribute('class','checkBtn-unselected');
checkbox.onclick = function(){alert('foo');};
ul.appendChild(checkbox);

---

我也在使用英特尔的应用程序框架/UI。我不知道这是否与此有关。此外，在其他地方，我已经能够编写HTML并将我的复选框放在其中，它似乎可以工作。只有当我尝试动态创建它时，事件处理程序才不会运行。

您的代码很好，但复选框DIV的高度为0，因此不会触发单击，li的填充为20px。我添加了这个并单击works：

checkbox.style.height = "40px";

---

下面是完整的代码：

问题是我的复选框旁边有一个标签。标签的填充有一些相对定位模糊，与我的按钮重叠，并截获了触摸/点击事件。我更改了标签的css，这样它就不会与我的按钮重叠，现在它可以工作了