客观的
当将鼠标悬停在表格单元格上时，表格单元格的右上角会出现一个小的放大镜图标。将鼠标悬停在放大镜图标上并单击它将打开一个对话框窗口，以显示有关特定表格单元格中的项目的详细信息。我想为数百个表格单元重复使用相同的图标，而不是每次都重新创建它。
部分解决方案
有一个单<span>这是绝对定位和隐藏的。当一个_previewable表格单元格悬停时，<span>被移动到正确的位置并显示。这<span>也被移动到 DOM 中成为_previewable表格单元格。这将启用附加到的单击处理程序<span>找到_previewable父级，并从其用于填充对话框内容的 jquery data() 对象中获取信息。
这是我的 HTML 的一个非常简化的版本：
<body>
<span id="options">
<a class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-search"></span>
Preview
</a>
</span>
<table>
<tr>
<td class="_previewable">
<img scr="user_1.png"/>
<span>Bob Smith</span>
</td>
</tr>
</table>
</body>
还有这个CSS：
#options {
position: absolute;
display: none;
}
使用以下 jQuery 代码：
var $options = $('#options');
$options.click(function() {
$item = $(this).parents("._previewable");
// Show popup based on data in $item.data("id");
Layout.renderPopup($item.data("id"),$item.data("popup"));
});
$('._previewable').live('mouseover mouseout',function(event) {
if (event.type == 'mouseover') {
var $target = $(this);
var $parent = $target.offsetParent()[0];
var left = $parent.scrollLeft + $target.position().left
+ $target.outerWidth() - $options.outerWidth() + 1;
var top = $parent.scrollTop + $target.position().top + 2;
$options.appendTo($target);
$options.css({
"left": left + "px",
"top": top + "px"
}).show();
}
else {
// On mouseout, $options continues to be a child of $(this)
$options.hide();
}
});
Problem
在我的表内容通过 AJAX 重新加载或更改之前，此解决方案可以完美运行。因为<span>被移离<body>作为单元格的子单元，它会在 AJAX 调用期间被丢弃并被替换。所以我的第一个想法是移动<span>当鼠标移出表格单元格时返回到正文，如下所示：
else {
// On mouseout, $options is moved back to be a child of body
$options.appendTo("body");
$options.hide();
}
然而，这样一来，<span>鼠标悬停后立即消失。 mouseout 事件似乎被调用_previewable当鼠标移入<span>，尽管<span>是一个孩子_previewable并在边界内完全显示_previewable表格单元格。目前，我只在 Chrome 中对此进行了测试。
问题
为什么会调用 mouseout_previewable，当鼠标仍在边界内时_previewable？是不是因为<span>是绝对定位吗？
我怎样才能在不重新创建的情况下完成这项工作<span>它是每次 AJAX 表刷新时的点击处理程序？
