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/