Javascript 使用.offset（）设置窗体相对于动态表数据的位置

我想在元素发生单击事件时，将表单放置在与动态对象相同的坐标处，但是表单没有放置在所需的坐标处。当触发静态元素上的事件时，我能够定位表单，但不能定位动态表元素上的事件，这使我认为我的问题与动态表有关

CSS

.form {
   width:600px;
   background-color:rgb(102,153,153);
}    

$('#table2').on("click", ".topic", function (event) {

    var getid = event.target.id;
    var mouseX = event.pageX;
    var mouseY = event.pageY;

    console.log(mouseX + " " + mouseY); //shows coordinates

    $('div.form').show();
    $('div.form').offset({
        left: mouseX,
        top: mouseY
    });
    $('div.form').attr('style', 'position:absolute');
})

JS

.form {
   width:600px;
   background-color:rgb(102,153,153);
}    

$('#table2').on("click", ".topic", function (event) {

    var getid = event.target.id;
    var mouseX = event.pageX;
    var mouseY = event.pageY;

    console.log(mouseX + " " + mouseY); //shows coordinates

    $('div.form').show();
    $('div.form').offset({
        left: mouseX,
        top: mouseY
    });
    $('div.form').attr('style', 'position:absolute');
})

HTML

JS构建表格 $（'#表2'）。附加（''+主题+'\ “+posttimestamp+”\ “+post_txt+”\ “+姿势+”“+品种+”\ +1-1\ “+票数+”

---

现在我不认为问题出在表上，因为我能够将元素定位在“#drop”和“#add”上单击事件的相同坐标处。

这是一个可能适用于您的概念

对于HTML，首先将表和表单包装在公共块容器中。 这不是完全必要的，但它是一种简单的方式来说明这个概念

这里有一个话题
主题单元格
主题单元格
更多内容
一些内容
主题单元格
这是你的表格

对于CSS：

.form{
宽度：150px；
高度：100px；
填充：20px；
背景色：rgb（102153153）；
位置：绝对位置；
顶部：0px；
左：0px；
显示：无；
}
.桌套{
边框：2件纯蓝；
位置：相对位置；
}
#表2{
边框：1px点蓝色；
}
#表2 td{
填充：20px；
背景颜色：浅灰色；
}
#表2.主题{
背景颜色：粉红色；
光标：指针；
}

该表由几个表单元格组成，其中一些单元格具有类

.topic

。注意，在第一个单元格中，我有一个带有

.topic

类的内联元素

.table wrap

容器的位置是相对的，

.form

的位置是绝对的。由于

.form

和

#table2

都是相对于同一父块定位的，因此它们的偏移是从同一原点测量的

jQuery是：

$（'.table wrap'）。在函数（事件）上（“单击”、“.topic”）{
var getid=event.target.id；
var mouseX=event.pageX；
var mouseY=event.pageY；
console.log（mouseX+“”+mouseY）；//显示坐标
$（'div.form'）.show（）；
$（'div.form'）。偏移量({
左：mouseX，
上图：老鼠
});
})

基本上，设置上/左偏移，就像您所做的那样，并显示表单。您的JavaScript是正确的，但是CSS定位需要帮助

演示小提琴：

PS：关于动态表

我显式地创建了表单元素，但是您可以使用jQuery的DOM操作函数来创建它

诀窍是将jQuery操作绑定到DOM本机的元素

---

（不是使用JavaScript动态创建的）。在本例中，我选择将actin绑定到

.table wrap

，它应该出现在原始DOM中。然后可以动态创建该表并将其插入包装器中，而无需中断操作绑定。

当您单击时是否会触发此单击处理程序？不知道为什么它不会工作，否则！我是否可以假定

.topic

是分配给

#表2

中某些元素的类？因此，表单仅在单击

.topic

元素时才会显示。如果您在OP中添加html标记，这将非常有用。我想您的问题与

html

有关，因为我没有看到您的代码中有任何错误！多谢。让我来解决这个问题，我会让你知道的。