ansaurus

Question

JQuery - how to use the hover() event on a list of DIVs?

Answer 1

+1 A:

$('.listing').bind('mouseover',function(){
alert($(this).attr('id'));
});

You can see this code working here.

UPDATE

looking at your code, you might want to try this instead:

$('.hlisting').live('mouseover',function(){
alert($(this).attr('id'));
});

pixeline 2010-01-28 20:03:28

Won't this cause problems on the mouseout? I thought the "hover" binding provided you the ability to give functions for over and out...

Topher Fangio 2010-01-28 20:04:46

no, it won't cause any problem. hover is nice if you want to trigger an event for both mouseenter and mouseleave .

pixeline 2010-01-28 20:10:14

I just tried that and it doesn't work, any idea why?

BillyJ 2010-01-28 20:22:55

I receive the following error: $("#panel div.listing").mouseOver is not a function

BillyJ 2010-01-28 20:26:58

This does not work. I've updated my original post to link to my live site to show how it does not work.

BillyJ 2010-01-28 20:39:26

BillyJ: the code i posted works. You can see it running on a live test. So the error is on your page somewhere. I don't see the inclusion of jquery in your code. Please learn to be more specific in your replies than just "it does not work". To be frank, it makes you sound like a cry-baby.

pixeline 2010-01-28 20:45:08

JQuery is in combined.min.1.4.1.js. I am using Firebug but can't find any errors being reported. I'm completely confused as to why it's not working.

BillyJ 2010-01-28 20:46:46

i'd suggest you try with a normal jquery load (using the < script> tag and see if that make it work. In the meanwhile i'll have a closer look at your page source code.

pixeline 2010-01-28 20:56:29

Many thanks @pixeline. I'll create another page while you look at my code in more detail that has JQuery pulled from Google

BillyJ 2010-01-28 20:57:40

i think i got it: try replaceing "bind" by "live" and tell me if that works. I think your div.hlisting are not available when the page first loads. They get inserted after some action i guess. So, use "live()" to attach the behaviour to any div.hlisting when created.

pixeline 2010-01-28 21:00:22

Pixeline, YOU ARE AWESOME. "live" works

BillyJ 2010-01-28 21:03:31

Thanks, glad i could help. Do you understand the problem now? It's a classic (that's why the jquery team thought of the "live()" binding system). Very useful in ajax application where the dom is modified heavily according to the user manipulations.

pixeline 2010-01-28 21:06:21

Most definitely and I'm learning more and more about JQuery everyday. In case you hadn't noticed, I use JQuery quite a bit in my app. Thanks again

BillyJ 2010-01-28 21:32:39

Answer 2

A:

better yet

$('#panel div.listing').mouseover(function() {
  alert($(this).attr('id'));
});

this works

<!DOCTYPE>
<html>
<head><title>test</title>
<style type="text/css">
.listing { width: 100px; height: 100px; border: 1px black solid; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
<script type="text/javascript">
  google.load("jquery", "1.4.1");
  google.setOnLoadCallback(function() {
    $('#panel div.listing').mouseover(function() {
        alert($(this).attr('id'));
    });
  });
</script></head>
<div id="panel">
  <div class="listing" id="ref_1">...</div>
  <div class="listing" id="ref_2">...</div>
  <div class="listing" id="ref_3">...</div>
  <div class="listing" id="ref_4">...</div>
</div>
</body>
</html>

davidosomething 2010-01-28 20:06:21

That won't work w/ the camelHump mouseover method name. It's all lowercase...

munch 2010-01-28 20:08:20

Why would that be better? mouseOver() calls bind(), so it's bound to be slightly less fast. Also, your selector does not make the traversing less intense, according to tests.

pixeline 2010-01-28 20:08:39

ty munchbut pixeline i thought that it used jquery uses javascript's getElementsByTagName(), so the tag "div" in fron makes the class selector faster, and using the ID before that should be even more specific? can you reference me the test?

davidosomething 2010-01-28 20:19:20

I receive the following error: $("#panel div.listing").mouseOver is not a function

BillyJ 2010-01-28 20:29:27

it's lowercase mouseover, i fixed it

davidosomething 2010-01-28 20:33:12

This does not work. I've updated my original post to link to my live site to show how it does not work.

BillyJ 2010-01-28 20:40:11

Answer 3

A:

Are you currently using $ as a function in other script file, and not using noConflict

dane 2010-01-28 20:36:02

This does not work. I've updated my original post to link to my live site to show how it does not work.

BillyJ 2010-01-28 20:40:45

Answer 4

A:

BillyJ, it sounds like you maybe aren't loading up the jQuery library in your HTML file.

Be sure to include <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> in your file before calling the above function.

theJBRU 2010-01-28 20:37:57

This does not work. I've updated my original post to link to my live site to show how it does not work.

BillyJ 2010-01-28 20:40:27

Here's the problem I'm seeing with your live page:On line 341, you're looking for a div with class="hlisting" and on line 345, you're looking for a div with class="listing" but in the body of your document, you don't have anything with either of those classes. (It looks like you create some with JavaScript later on, but I don't see any on the page linked above.)

theJBRU 2010-01-28 20:53:51

Answer 5

A:

Seems to work fine separate from your site...

I'd suggest just adding a div in the code with a hslisting class. Don't use JS to inject it. See if something about the way you are injecting it is causing problems.

http://jsbin.com/agosa works just fine.

Jared 2010-01-28 21:10:23

Answer 6

A:

The 'mouseenter' event is usually a better choice than 'mouseover'. From http://api.jquery.com/mouseenter/ :

"The mouseenter event differs from mouseover in the way it handles event bubbling. If mouseover were used in this example, then when the mouse pointer moved over the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseenter event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant."

jQuery('#panel div.listing').bind('mouseenter',function(){
  alert(this.id);
  return false;
});

droo 2010-01-28 21:11:17

ansaurus

tags:

views:

answers:

JQuery - how to use the hover() event on a list of DIVs?

related questions