javascript - 循环中的jQuery click事件被float属性打破

我正在尝试使用jQuery使用以下代码将click事件处理程序添加到一堆动态生成的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);
    });

这可以正常正常地工作，但是只要我向.nestingdiv类添加一个float参数，就像这样：

.nestingdiv { float:left; }

点击处理程序不再触发（在Firefox和Chrome上测试）。有谁知道为什么会这样或者我该如何解决呢？

最佳答案

问题不是您的JavaScript，而是您的CSS。换句话说，“单击”处理程序就可以了。当唯一的嵌套元素处于浮动状态时，父元素将失去其“结构”（因为缺少更好的单词）并折叠。它仍然存在，但现在高1像素。

解：
    http://css-tricks.com/snippets/css/clear-fix/

替代解决方案：
    http://thinkvitamin.com/design/everything-you-know-about-clearfix-is-wrong/