Question

我正在尝试使用jQuery使用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);
    });

这完全正常，但只要我将一个float参数添加到.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/

循环中的jQuery click事件被float属性破坏

1 个答案: