jQuery append doesn't see changes?

I have some scripting that modifies my web application. What it basically does is:

1. Add dynamic elements to the DOM
2. Resize some DOM elements to fit the window height and other stuff...

So, I do:

$(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()

But, I don't get the proper height value on $('.column').height. The script retrieves to me the height value as if I didn't append the clearfix element. It's开发者_运维知识库 like it doesn't take into account that part when it calculates the final height.

I've even tried with deferred object, but no success. It still takes the height without the clearfix element consideration.

For not CoffeeScript folks, here I paste the generated 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();
  });

Any way to fix that?

this might be resolved by using jquery .live

The .live() method is able to affect elements that have not yet been added to the DOM through the use of event delegation: a handler bound to an ancestor element is responsible for events that are triggered on its descendants. The handler passed to .live() is never bound to an element; instead, .live() binds a special handler to the root of the DOM tree.

.live() is used for bind an event to alement created dynamically after the page is loaded. What browser are you using? and what version of jQuery? Because I remeber that a there was a bug with .heigth() and certain browser.

Note that You can pass more than one event argument to jQuery live like this:

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