jQuery append не видит изменений?

Question

У меня есть некоторые скрипты, которые меняют мое веб-приложение. Что в основном делает:

1. Добавить динамические элементы в DOM
2. Изменение размера некоторых DOM элементов, чтобы соответствовать высоте окна и другие вещи ...

Итак, я:

$(document).ready -> 
    $('.interval-view').wrapInner '<div class="column" />' 
    $('.column').wrapInner   '<div class="inner-column" />' 
    $('#contents, #footers').append '<div class="clearfix"></div>' 

    $('.interval-view:even').css 'background-color', '#F9F9F9' 
    $('.interval-view:odd').css 'background-color', '#DDD' 

    resize = -> 
    $('.column').height       $(window).height() - $('#filter-list').outerHeight(true) - $('#footers').outerHeight(true) 
    $('#timeline-panel').width     $(window).width() 
    $('#timeline-panel .scrollable-area').width "#{$('.interval-view').length * $('.interval-view').width()}px" 

    window.onorientationchange = -> 
    resize() 

    $(window).resize -> 
    resize() 

    resize() 

Но, я не получаю правильное значение высоты на $('.column').height. Сценарий возвращает мне значение высоты, как если бы я не добавлял элемент clearfix. Это похоже на то, что он не учитывает эту часть, когда вычисляет конечную высоту.

Я даже пробовал с отложенным объектом, но не успел. Он по-прежнему занимает высоту без учета элемента clearfix.

Для не CoffeeScript людей, здесь я вставить сгенерированный Javascript:

$(document).ready(function() { 
    var resize; 
    $('.interval-view').wrapInner('<div class="column" />'); 
    $('.column').wrapInner('<div class="inner-column" />'); 
    $('#contents, #footers').append('<div class="clearfix"></div>'); 
    $('.interval-view:even').css('background-color', '#F9F9F9'); 
    $('.interval-view:odd').css('background-color', '#DDD'); 
    resize = function() { 
     $('.column').height($(window).height() - $('#filter-list').outerHeight(true) - $('#footers').outerHeight(true)); 
     $('#timeline-panel').width($(window).width()); 
     return $('#timeline-panel .scrollable-area').width("" + ($('.interval-view').length * $('.interval-view').width()) + "px"); 
    }; 
    window.onorientationchange = function() { 
     return resize(); 
    }; 
    $(window).resize(function() { 
     return resize(); 
    }); 
    return resize(); 
    }); 

Любой способ исправить это?

Answer 1

это может быть решена с помощью JQuery .live

.live() метод способен влиять на элементы, которые еще не были добавлены в DOM посредством использования делегирования событий: обработчик обязан к элементу-предшественнику отвечает за события, которые запускаются на его потомкам. Обработчик, передаваемый в .live(), никогда не связан с элементом ; вместо этого .live() связывает специальный обработчик с корнем дерева DOM .

Answer 2

.live() используется для привязки события к элементу, созданного динамически после загрузки страницы. Какой браузер вы используете? и какая версия jQuery? Потому что я помню, что была ошибка с .heigth() и определенным браузером.

Answer 3

Обратите внимание, что Вы можете передать более чем один аргумент событие JQuery жить так:

$(window).live('resize onorientationchange', function() { 
    resize(); 
});