Question

目的

当表格单元格悬停在表格单元格的右上角时，会出现一个小的放大镜图标。将鼠标放在放大镜图标上并单击它将打开一个对话框窗口，以显示有关该特定表格单元格中项目的详细信息。我想为数百个表格单元重用相同的图标，而不是每次都重新创建它。

部分解决方案

有一个绝对定位和隐藏的。当_previewable表格单元格悬停时，会移动到正确的位置并显示出来。此也在DOM中移动为_previewable表格单元格的子级。这使得附加到的单击处理程序能够找到_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();
    }
});

问题

此解决方案完美无缺，直到通过AJAX重新加载或更改我的表的内容。因为已从<body>移动到单元格的子节点，所以它会在AJAX调用期间被抛出并替换。所以我的第一个想法是在表格单元格的鼠标输出上将移回正文，如下所示：

    else {
        // On mouseout, $options is moved back to be a child of body
        $options.appendTo("body");
        $options.hide();
    }

然而，有了这个，一旦鼠标悬停就会消失。当鼠标移动到_previewable时，似乎在上调用mouseout事件，即使是_previewable的子项并且完全显示在_previewable的边界内_previewable表格单元格。此时，我只在Chrome中对此进行了测试。

问题

当鼠标仍在_previewable的边界内时，为什么要在上调用mouseout？是因为绝对定位了吗？
如何在不重新创建每个AJAX表格的{{1}}及其点击处理程序的情况下完成此工作？

Answer 1

如果您更改了活动，那么您拥有的其他内容（附加到<body>）将会起作用，如下所示：

$('._previewable').live('mousenter mouseleave',function(event) {

与mouseover和mouseout不同，mousenter和mouseleave事件在移动到儿童或从儿童移动时不会触发，因此他们的行为会像您想要的那样这个案例。

为了保持清洁，我会分别绑定.live('mouseenter）和.live('mouseleave')并移除if()，看起来更容易看看发生了什么，可能只是我：）

Answer 2

这看起来像是为了避免在每个单元格中留下微小的图像而进行大量工作。通过“重用”元素的一个实例，你并没有真正获得太多收益。浏览器只需下载一次图像。从性能的角度来看，摆弄DOM树比仅仅切换突出显示元素的显示属性需要更多的资源。

最简单的方法可能就是将放在您打印的每个单元格中，然后使用CSS隐藏/显示。

鼠标悬停在绝对定位div上触发

目的

部分解决方案

问题

问题

2 个答案: