jQuery的单击事件

Question

我想点击的事件处理程序添加到一堆使用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); 
    }); 

这工作完全正常，但只要我一个浮动参数添加到.nestingdiv类是这样的：

.nestingdiv { float:left; } 

单击处理不再触发（在Firefox和Chrome测试）。有没有人有任何想法，为什么这可能是这种情况，或者我可以如何解决它？

Answer 1

问题不在于你的JavaScript，而在于你的CSS。换句话说，“点击”处理程序就好了。当唯一的嵌套元素是浮动的，父元素失去了它的“结构”（缺乏更好的单词）并崩溃。它仍然存在，但现在高出1px。

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

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