Javascript jquery活问题

我有一个网站，它使用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”，但垃圾箱位于tablecell内，因此不应触发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（）方法

---

那么，我的错误在哪里呢？

我会使用jQuery事件来防止闪烁，它们在这里提供了更智能的触发：

mouseenter

和

mouseleave

。请记住，

.live（）

现在也支持

悬停

您可以像这样使用
鼠标悬停
（
鼠标悬停
/
鼠标悬停
）：

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

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

您可以像这样使用
鼠标悬停
（
鼠标悬停
/
鼠标悬停
）：

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

不要将事件绑定到每个表单元格，而是将其绑定到表。这样，您将只有1个侦听器，这将加快浏览器的速度。另外，这个表是用Javascript动态创建的还是服务器端创建的？不要将事件绑定到每个表单元格，而是绑定到表。这样，您将只有1个侦听器，这将加快浏览器的速度。另外，这个表是用Javascript动态创建的，还是服务器端创建的？它可以工作！但诀窍是将“event.target.id”替换为“this.id”。如果我在代码中替换它，它也会起作用。尽管如此，您的代码还是更加优雅，我认为：）@Kay-欢迎使用SO，感谢您提出了一个很好的、经过详细说明/解释的问题+1它可以工作！但诀窍是将“event.target.id”替换为“this.id”。如果我在代码中替换它，它也会起作用。不过，您的代码更加优雅，我认为：）@Kay-欢迎使用SO，感谢您提出了一个很好的、但已解释/已解释的问题+1