Javascript jQuery循环中的click事件被float属性打断

我尝试使用jQuery将单击事件处理程序添加到一组动态生成的div中，代码如下：

for (var i = 0; i < 10; ++i) {
    var testdiv = document.createElement('div');
    testdiv.innerHTML = 'test' + i;
    testdiv.id = 'test' + i;

    var nestingdiv = document.createElement('div');
    nestingdiv.classList.add('nestingdiv');
    nestingdiv.appendChild(testdiv);

    setTestClickHandler(i);
end

function setTestClickHandler(i) {
    $('#test' + i).click(function() {
        alert(i);
    });

---

点击处理程序不再触发（在Firefox和Chrome上测试）。有人知道为什么会出现这种情况，或者我如何着手解决它吗？

问题不在于JavaScript，而在于CSS。换句话说，“单击”处理程序很好。当唯一的嵌套元素是浮动的时，父元素将失去它的“结构”（因为缺少更好的单词）并崩溃。它仍然在那里，但现在是1倍高

解决方案：

替代解决方案：

---

我会给你的div添加一个background color属性，例如div{background color:red；}并观察页面-你可能会发现你的div与你期望的位置/形状不同！嗯，当您不将这些元素连接到DOM树时，我不确定这是如何正常工作的。尝试使用

document.body.appendChild（nestingdiv）

将

nestingdiv

添加到现有和活动的树中。非常感谢-这太棒了！我认为我的css有点生疏，因为我记得以前曾与清除浮动作过斗争，但我确信这是一个事件处理程序问题，所以忽略了这一点。

.nestingdiv { float:left; }