jQueryのスコープの混乱

Question

私は私の上のメニューナビゲーションでアクティブなリンクの位置を検索するには、次のjQueryコードを使用しています

：私はこのイベントハンドラの外にまったく同じコードを貼り付けるときに今

$(document).ready(){ 
    // Handles the triangle image sprite for the top navigation 
$('#topnav a') 
    .on({ 

     mouseenter: function() { 

      var pos = $("#topnav a.active-top").offset(); 
      console.log("Top: " + pos.top + " Left: " + pos.left); 

      // Get the position of the current hovered "a" element 
      var upSprite = $("#upArrow").show(), 
       pos = $(this).offset(), 
       aWidth = $(this).width(), 
       offsetTop = 27, // Adjust this to raise or lower the sprite 
       offsetLeft = aWidth/2; // Centers the element under the link 


      upSprite 
       .css({ 
        "top": pos.top + offsetTop, 
        "left": pos.left + offsetLeft 
       }); 

      //console.log("Top: " + pos.top + " Left: " + pos.left); 

     }, 

     mouseleave: function() { 
      // Hide the arrow once the mouse leaves 
      $('#upArrow').hide(); 
     } 

    }); 
} 

$(document).ready(function() {   
    var pos = $("#topnav a.active-top").offset(); 
    console.log("Top: " + pos.top + " Left: " + pos.left); 
} 

私はpos.leftの完全な異なる値を取得します。

私が理解しているように、offset（）はドキュメントの相対位置を与えるべきであり、親コンテナに対する相対位置を与える.position（）とは異なります。

コードが.on（）イベントハンドラのスコープ内にあるとき、別の種類のコンテキストにコードが供給されていますか？私は無駄に$ .proxy（）を使ってみました。任意のヒントが評価されます。ありがとう。

Answer 1

$(document).ready() DOMがロードされると起動します。すべての画像がロードされる前に。このために要素の再ペイントによってoffset()を取得した後にオフセットが変更されていることがわかります。

この問題を解決するには、代わりに$(window).load()イベントを処理するか、クリックハンドラー内の位置を取得し続けることができます（これが私の推奨です）。

Answer 2

"#topnav a.active-top"とその位置を変更する（おそらく）要素で参照される要素が正確にわからないので、これを分析するのは難しいです。

$（something）.mouseenter（）の前に$（document）.ready（）の後にいくつかの処理（画像読み込み、いくつかの要素の幅/高さの変更など）があると思います。