MouseOver 이벤트 및 동적 메뉴 div 만들기 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

이 $('body').append(menuDiv); 대신 $(document).append(menuDiv); 사용해야합니다; http://jsfiddle.net/ZPh3U/