jQuery追加没有看到变化？答案

【问题标题】：jQuery append doesn't see changes?jQuery追加没有看到变化？
【发布时间】：2011-10-23 04:42:06
【问题描述】：

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

向 DOM 添加动态元素
调整一些 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();
  });

有什么办法解决吗？

【问题讨论】：

标签： jquery append coffeescript clearfix

【解决方案1】：

这可以通过使用 jquery .live来解决

.live() 方法能够影响尚未被处理的元素通过使用事件委托添加到 DOM：绑定的处理程序到一个祖先元素负责触发的事件它的后代。传递给 .live() 的处理程序永远不会绑定到元素;相反， .live() 将一个特殊的处理程序绑定到 DOM 树。

【讨论】：

但是，我的问题不在于事件，而在于页面加载。页面加载后，调整大小事件效果很好。唯一不好的是在加载页面（当然不会触发任何调整大小事件）

【解决方案2】：

.live() 用于将事件绑定到页面加载后动态创建的元素。你使用的是什么浏览器？什么版本的jQuery？因为我记得 .heigth() 和某些浏览器存在错误。

【讨论】：

我现在使用的是最新的 Mac 版 Chrome。我还在使用最新的 jQuery 版本 (CDN)。我也在 iPad 和 Firefox 上尝试过，但我得到了相同的结果。

【解决方案3】：

请注意，您可以像这样向 jQuery live 传递多个事件参数：

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

【讨论】：

问题是它已正确绑定到事件。问题在于第一次加载尝试：当我调整窗口大小时，效果很好。