jQuery 追加看不到变化？

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').高度。该脚本向我检索高度值，就好像我没有附加 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();
});