jQuery点击事件在循环中打破了浮动属性

jQuery click event in loop broken by float attribute

本文关键字：属性 事件 循环 jQuery      更新时间：2023-09-26

我试图添加点击事件处理程序到一堆动态生成的div使用jQuery使用代码如下:

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; }

click处理程序不再触发(在Firefox和Chrome上测试)。有人知道为什么会出现这种情况吗?或者我该如何解决这个问题?

问题不是你的JavaScript，而是你的CSS。换句话说，"click"处理程序很好。当唯一的嵌套元素是浮动的，父元素失去了它的"结构"(因为没有更好的词)并崩溃。它还在那里，但是现在是1px高了。

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

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

相关文章：