0

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();
  });

それを修正する方法はありますか？

4

3 に答える 3

0

これは jquery .liveを使用することで解決される可能性があります

.live() メソッドは、イベント委譲を使用して、まだ DOM に追加されていない要素に影響を与えることができます。祖先要素にバインドされたハンドラーは、その子孫でトリガーされるイベントを担当します。.live() に渡されるハンドラーは、要素にバインドされることはありません。代わりに、.live() は特別なハンドラーを DOM ツリーのルートにバインドします。

于 2011-08-09T12:42:14.787 に答える
0

.live() は、ページのロード後に動的に作成されたイベントをイベントにバインドするために使用されます。どのブラウザを使用していますか? jQueryのバージョンは？.heigth() と特定のブラウザにバグがあったことを覚えているからです。

于 2011-08-09T12:45:17.343 に答える
0

次のように、複数のイベント引数を jQuery live に渡すことができることに注意してください。

$(window).live('resize onorientationchange', function () {
    resize();
});
于 2011-08-09T12:52:28.773 に答える