使用.offset()设置相对于动态表数据的表单位置
我希望在元素的单击事件上将表单定位在动态的相同坐标上，但是表单不位于所需的坐标处。我能够在静态元素上触发事件时定位表单，而不能在动态表元素上定位，这使我认为我的问题与动态表有关。
CSS
.form {
width:600px;
background-color:rgb(102,153,153);
} JS
$('#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构建表 $('#table2').append('‘+主题+'\’+后时间戳+ '\‘+ post_txt + '’+‘育成+’1-1‘+选票+ '')；
现在我不认为问题是桌子，因为我能够定位一个
元素位于'#drop‘和'#add’上单击事件的相同坐标处。
回答 1
Stack Overflow用户
发布于 2013-06-18 18:13:33
以下是可能对你有用的概念。
对于HTML，首先将表和表单包装在一个公共块容器中。这并不是完全必要的，但这是一个简单的方法来说明这个概念。
<div class="table-wrap">
<table id="table2">
<tr>
<td>a <b class="topic">topic</b> is here</td>
<td class="topic">a topic cell</td>
</tr>
<tr>
<td class="topic">a topic cell</td>
<td>more content</td>
</tr>
<tr>
<td>some content</td>
<td class="topic">a topic cell</td>
</tr>
</table>
<div class="form">
<p>This is your Form.</p>
</div>
</div>用于CSS
.form {
width: 150px;
height: 100px;
padding: 20px;
background-color:rgb(102, 153, 153);
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.table-wrap {
border: 2px solid blue;
position: relative;
}
#table2 {
border: 1px dotted blue;
}
#table2 td {
padding: 20px;
background-color: lightgray;
}
#table2 .topic {
background-color: pink;
cursor: pointer;
}该表由几个表格单元格组成，其中一些单元格具有类.topic。注意，在第一个单元格中，我有一个带有.topic类的内联元素。
.table-wrap容器是相对的，.form是绝对定位的。由于.form和#table2都是针对同一个父块定位的，因此它们的偏移量是从相同的起源来度量的。
jQuery是：
$('.table-wrap').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
});
})本质上，设置上/左偏移量，就像您所做的那样，并显示表单。您的JavaScript是正确的，但是CSS定位需要帮助。
演示小提琴：http://jsfiddle.net/audetwebdesign/5XCQR/
PS:关于动态表
我显式地创建了表单元素，但是您可以使用jQuery的DOM操作函数来创建它。
诀窍是将jQuery操作绑定到DOM的原生元素(不是使用JavaScript动态创建的)。在这种情况下，我选择将肌动蛋白绑定到.table-wrap，它应该存在于原始DOM中。然后可以动态地创建该表，并将其插入包装器中，而不会破坏操作绑定。
https://stackoverflow.com/questions/17174713
复制相似问题
腾讯云开发者
