绑定鼠标事件时出现问题

Question

我有一张图像表。当鼠标悬停在每一行上时，会在之前隐藏的 div 中显示其图像，该 div 已经绝对定位。当我将鼠标悬停在现在显示的图像上时，我想取消绑定 tr mouseleave 事件，以便图像不会闪烁，然后在离开图像 div 时重新绑定 mouseleave 事件。

我能够取消绑定 mouseleave 事件，但重新绑定会导致发生闪烁。相关代码：

<table border="1" id="photoTable">
<tbody> 
    <tr class="item">
        <td class="filename">
            GraphDataCAQ3UW88.png
        </td>
    </tr>
    </tbody>
</table>
<div id="thisPhoto"></div>

css：

#thisPhoto{
display:none;
position:absolute;
left:250px;
top:150px;
border: 1px solid black;
background-color:white;
padding:20px;
z-index:2;
}

js：

$(document).ready(function(){

(function($){
    $.fn.getThisPhoto = function(){
        return $(this).each(function(){
            //I've left out the code which gets the data to pass to $.get()
            $.get('administration/PhotoManagement/thisPhoto.cfm',
                data,
                function(response){
                    $('#thisPhoto').html(response).show();
                }
            );
        });
    };
})(jQuery);

   $('tr.item').hover(function(){       
    $(this).getThisPhoto();
},
function(){
    $('#thisPhoto').hide();
});

$('#thisPhoto').mouseenter(function(){
    $('tr.item').unbind('mouseleave');
}).mouseleave(function(){
    $('tr.item').bind('mouseleave', function(){
        $('#thisPhoto').hide();
    });
});

});

编辑：我通过将整个shebang包装在div中并在该div上设置mouseout来触发hide（）和bind（）函数来破解它......不完全是我想要的，但它'紧要关头我会做的。

Answer 1

我不确定此模型是否适合您的要求，但请考虑将 div#thisPhoto 制作成 tr 内的单独 div。这样，当您将鼠标悬停在图像上时，您仍然将鼠标悬停在表格行上。例如，标记类似于：

<tr>
    <td>
        <div class="thePhoto">
            <img src="http://www.mysite.com/images/Image001.jpg" />
        </div>
        Image001.jpg
    </td>
</tr>
<tr>
    <td>
        <div class="thePhoto">
            <img src="http://www.mysite.com/images/Image002.jpg" />
        </div>
        Image002.jpg
    </td>
</tr>

如果您为 div.thePhoto 提供 position:relative 样式，则可以为 div.thePhoto > 提供 position:relative 样式。 img 一个 position:absolute 样式，并将其相对于表格单元格的左上角定位。这样，您只需将 .hover() 事件绑定到每个表格行到 .find("div.thePhoto") 并显示或隐藏其子 img 元素。

有关示例，请参阅此小提琴。

Answer 2

您不需要绑定和取消绑定事件，您需要使用不同的设计模式。

看看这个小提琴： http://jsfiddle.net/Diodeus/gHa4u/1/