jQuery append doesn't see changes?

Question

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

Add dynamic elements to the DOM
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?

score 0 · Accepted Answer · answered Aug 09 '11 at 12:42

0

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.

answered Aug 09 '11 at 12:42

Eonasdan

7,563
8
55
82

But, my problem is not with events, it's with the page load. After the page it's loaded, the resize events work great. The only thing that doesn't work great is at load page (without triggering any resize event, of course) – frarees Aug 09 '11 at 13:06

score 0 · Answer 2 · answered Aug 09 '11 at 12:45

0

.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.

answered Aug 09 '11 at 12:45

Kreker

2,438
3
23
27

I'm using the latest Chrome version for Mac as of today. I'm also using the latest jQuery release (CDN). I've tried it also on iPad an Firefox, but I've got the same results. – frarees Aug 09 '11 at 12:58

score 0 · Answer 3 · answered Aug 09 '11 at 12:52

0

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

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

answered Aug 09 '11 at 12:52

veidelis

149
3
17

The thing is that it's binded to the events properly. The problem is at the first load attempt: when I resize the window, it works great. – frarees Aug 09 '11 at 13:04

jQuery append doesn't see changes?

3 Answers3