javascript - 带有类的 jquery 附加事件执行不止一次

Question

我有一些具有相同类的 div 说:

<div id="1" class="same">..</div>
<div id="2" class="same">..</div>
<div id="3" class="same">..</div>

我将事件处理程序附加到所有 div 中:

$(".same").live({mouseenter : function{ /*code*/ },mouseout: function{ /*code*/ }})

现在我的问题是当 mouseenters 到 div (id="1") 时，mouseenter 函数的代码将执行 3 次可能是因为有 3 个 div 与 class="same " 但我希望它只执行一次并且不使用 ID 附加事件。这可能吗？

Answer 1

事件3次不绑定(bind)。但是当你移动到下一个 div 时，你可能会得到一个 div 的鼠标输入，你会得到鼠标离开这个潜水和另一个 div 的鼠标输入。

移动到第一个 div，然后移动到第二个会触发三个事件

1. 第一个 div 的鼠标输入
2. 第一个 div 的鼠标移出

3. 第二个div的mouseenter

   Demo on JsFiddle

由于脚本没有为我执行，我通过在关键字函数后添加括号来进行了一些更改。

之前

$(".same").live({mouseenter : function{ /*code*/ },mouseout: function{ /*code*/ }})

之后

$(".same").live({mouseenter : function(){ /*code*/ },mouseout: function(){ /*code*/ }})

你可以执行这段代码看看发生了什么

 $(".same").live(
    {
     mouseenter : 
     function()
     { 
         alert(" mouseenter >>Current Div ID = "+ this.id);
     },
     mouseout: 
     function()
     { 
         alert("mouseout >>Current Div ID = "+ this.id);
     }
    }
);​