JQuery - 向类添加鼠标事件侦听器

<div class="teamMain">
    <div class="teamScroll">
        PRIMO
    </div>

    <div class="teamScroll">
        SECONDO
    </div>

    <div class="teamScroll">
        TERZO
    </div>
</div>

And i'd like to add a sort of listener (such mouseover or mouseout) for each of this div, by taking the class teamScroll as reference.

我想通过将teamScroll类作为参考,为每个div添加一种监听器(例如mouseover或mouseout)。

I know there is delegate method, but it works only with jquery-1.4.2 version (which, as posted time ago for another problem) broke some functions with IE6.

我知道有委托方法,但它只适用于jquery-1.4.2版本(由于之前发布的另一个问题)破坏了IE6的一些功能。

There is other way to do this without put N listener for N div?

还有其他方法可以在不为N div设置N侦听器的情况下执行此操作吗?

Cheers

3 个解决方案

#1

You can use a normal .hover() handler, like this:

你可以使用普通的.hover()处理程序,如下所示:

$(".teamScroll").hover(function() {
  //mouse on the item
}, function() {
  //mouse off the item
});

That's the way that always works (but does 2n handlers like you're asking about), assuming 1.4.2 isn't an option...if you're on at least 1.3.2, there's .live() like this:

这是总是有效的方式(但是像你要问的2n处理程序),假设1.4.2不是一个选项...如果你至少在1.3.2上,那么.live()是这样的:

$(".teamScroll").live("mouseenter", function() {
  //mouse on the item
}).live("mouseleave", function() {
  //mouse off the item
});

The difference here is that .live() runs an extra selector and the event bubbles all the way up to document...as well as it actually maps to mouseover and mouseout under the covers, which is often undesirable.

这里的区别在于.live()运行一个额外的选择器,并且事件一直向文档冒泡......以及它实际上映射到封面下的mouseover和mouseout,这通常是不合需要的。

Instead, I'd suggest the .delegate() route, and seeing if jQuery 1.4.4 fixes the issue you have in 1.4.2, there were several AJAX tweaks in 1.4.3/1.4.4.

相反,我建议使用.delegate()路由,看看jQuery 1.4.4是否修复了1.4.2中的问题,1.4.3 / 1.4.4中有几个AJAX调整。

#2

Try

$('.teamScroll').bind('onmouseover', function() {
  alert('Mouseover');
});

#3

$('.teamScroll').mouseover(function(){

});

#1