javascript - jQuery 用 live 替换绑定(bind)

Question

我有一个使用 jQuery 和大量 mouseover/mouseout 效果的网站。到目前为止，我使用了 jQuery 的 .bind() 方法，但如果您有 >1000 个事件处理程序，这会大大减慢您的浏览器速度。因此，我想改用 .live 或 .delegate。

我的门户网站的一部分是聊天区域。用户可以设置聊天消息，然后将其显示在一个简单的表格中。有一项功能是，如果您将鼠标移到聊天消息上，就会出现一个垃圾桶，允许您删除该消息(如果是您发送的消息或者您是版主)。

垃圾箱与聊天消息位于同一表格单元格中。

问题:使用.bind()它就像一个魅力。这是旧代码:

function CreateChatMessageContextMenu(ctrl, messageID, message, sender) {
    
    var a = document.createElement("a");
    a.href = "javascript:RemoveChatMessage(" + messageID + ");"
    a.id = 'aDeleteChatMessage' + messageID;
    a.style.display = 'none';
    var img = document.createElement("span");
    img.className = "sprite-common messages-image sprite-common-btnDelete";
    a.appendChild(img);
    ctrl.appendChild(a);


    $(ctrl)
        .bind('mouseover', function(event) { $('#aDeleteChatMessage' + messageID).show() })
        .bind('mouseout', function(event) { $('#aDeleteChatMessage' + messageID).hide() });
    return;

}

“ctrl”是对表格单元格的引用。

现在，使用 .live() 垃圾箱也会出现，但它闪烁很多，当我将鼠标移到垃圾箱上时，它会消失或不活动。我感觉有更多的事件被抛出或者什么的。当移动到垃圾箱上时，似乎会引发 mouseout ，但 thrashbin 位于表格单元格内，因此不应触发 mouseout 。新代码如下:

$(document).ready
{
$('.jDeleteableChatMessage').live('mouseover mouseout', function(event) {
    var linkID = '#aDelete' + event.target.id;
    if (event.type == 'mouseover') {
        $(linkID).show();
    } else {
        $(linkID).hide();
    }
    return false;
});
}

function CreateChatMessageContextMenu(ctrl, messageID, message, sender) {
if (!UserIsModerator && (UserLogin != sender)) return;
ctrl.id = 'ChatMessage' + messageID;
var deleteString = 'Diese Chatnachricht löschen';
if (UserLang == '1') deleteString = 'Delete this chat message';

var a = document.createElement("a");
a.href = "javascript:RemoveChatMessage(" + messageID + ");"
a.id = 'aDeleteChatMessage' + messageID;
a.style.display = 'none';
var img = document.createElement("span");
img.className = "sprite-common messages-image sprite-common-btnDelete";
img.alt = deleteString;
img.title = deleteString;
a.appendChild(img);
ctrl.appendChild(a);

$(ctrl).addClass('jDeleteableChatMessage');

}

我添加了一个类来告诉 jQuery 哪个聊天单元有垃圾箱，哪个没有。我还将一个 ID 添加到表格单元格，稍后用于确定关联的垃圾箱。是的，这是传递给事件方法的笨拙的数据。当然，还有 document.ready 函数来初始化 .live() 方法。

那么，我的错误在哪里？

Answer 1

我会使用 jQuery 事件来防止闪烁，它们在这里提供了更智能的触发:mouseenter 和 mouseleave。请记住，.live() 现在也支持 hover。

您可以像这样使用hover (mouseenter/mouseleave):

$('.jDeleteableChatMessage').live('hover', function(event) {
  $('#aDelete' + this.id).toggle();
  return false;
});