如何使元素显示在光标坐标（jQuery）上？

我编写了以下jQuery代码：

$(".button").live("click", function(){  // When you click on .button...
    $(this).before(" <div class='add'> +1 </div> ");  // ...a new div appears.
});

$（“.button”）.live（“单击”，函数（）{//当您单击时。按钮…”。。。
$（this）.before（“+1”）；/…出现一个新的div。
});

新的“+1”div当前设置为显示在预定位置

---

您能否帮助我将光标坐标传递到div位置，以使div显示在用户单击的位置？

这里有一个示例：

注意：我会一直使用同一个div来更清晰地显示DOM。但是，如果每次单击都需要一个DIV，请更改代码，以便每次单击都创建一个新的DIV。 HTML

jquery脚本

jQuery(document).ready(function(){
  $("#BodyID").click(function(e){
         $("#test").show(2000);
         $("#test").offset({left:e.pageX,top:e.pageY});

         })
})

参考：

#test {
    width: 200px;
    height: 200px;
    border: 1px dotted blue;
}

jQuery(document).ready(function(){
  $("#BodyID").click(function(e){
         $("#test").show(2000);
         $("#test").offset({left:e.pageX,top:e.pageY});

         })
})