MouseOverイベントと動的メニュー部を作成するjQueryを使用する

Question

私はonmouseoverイベントをイメージに添付しています。 mouseoverイベントはdivを作成し、画像が配置されたのと同じ位置に追加する必要があります。 divはフローティングメニューdivとして使用されます。私は座標を得ることができますが、何らかの理由でdivを文書に追加すると、divをどこにでも見ることができません。

$(actionImage).mouseover(function(e) { 

      // get the coordinates 
      var x = e.pageX - this.offsetLeft; 
      var y = e.pageY - this.offsetTop; 

      var menuDiv = createMenuDiv(); 

      $(menuDiv).css(
       { 
        position:"absolute", 
        top: y + "px", 
        left:x + "px" 
       } 
      ); 


      $(document).append(menuDiv); 


     }); 


function createMenuDiv() { 

    var menuDiv = document.createElement("div"); 
    $(menuDiv).css("background-color", "yellow"); 
    $(menuDiv).css("z-index", "99"); 


    var b = document.createElement("input"); 

    $(menuDiv).append(b); 

// var addButtonLabel = document.createElement("label"); 
// $(addButtonLabel).text("Add"); 
// 
// var deleteButtonLabel = document.createElement("label"); 
// $(deleteButtonLabel).text("Delete"); 

// $(menuDiv).append(addButtonLabel); 
// $(menuDiv).append(deleteButtonLabel); 

    return menuDiv; 

} 

Answer 1

$(document).append(menuDiv);の代わりに$('body').append(menuDiv);を使用する必要があります。 http://jsfiddle.net/ZPh3U/