Событие нажатия jQuery в цикле, прерванное атрибутом float

Question

Я пытаюсь добавить обработчики событий клика в кучу динамически генерируемых 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);
    });

Это работает нормально, но как только я добавляю параметр 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/