jquery - jQuery追加没有看到变化？

Question

我有一些脚本可以修改我的 Web 应用程序。它的基本作用是：

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 live 传递多个事件参数：

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