CODEWITHSUNDEEP
jquery
George Johnston
George Johnston

Reputation: 32258

Why isn't my hover event firing in JQuery?

I'm not sure why my event isn't firing? I simply want to change the list style type when the user hovers over an li. It doesn't look like I'm missing anything, but nothing is happening.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <link href="theme.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
  $(".component ol li").hover(function() {
          $(this).css('list-style-type', 'disc');
      }
   );
</script>
<body>
    <form id="form1" runat="server">
     <div class="component">
     <ol>
         <li><a href="#"></a>&nbsp;</li>
         <li><a href="#"></a>&nbsp;</li>
         <li><a href="#"></a>&nbsp;</li>
         <li><a href="#"></a>&nbsp;</li>
         <li><a href="#"></a>&nbsp;</li>
     </ol>
     </div>    
    </form>
</body>
</html>

Upvotes: 4

Views: 2308

Answers (6)

Chris Love
Chris Love

Reputation: 3893

You can use the $.delegate method to create a mouseenter and a mouseleave event handler to manage your hover effect. I know you did not define a hover off handler in your code, but here is how you would do it using delegate, which will work anytime you have elements matching the selectors:

$(".component ol").delegate("li", "mouseenter", function(e) {
  $(this).css('list-style-type', 'disc');
});

$(".component ol").delegate("li", "mouseleave", function(e) {
  $(this).css('list-style-type', 'circle');
});

Upvotes: 0

Pranav Kaushik
Pranav Kaushik

Reputation: 203

First I would recommend using 

 $(document).ready(function(){

     //your code here
 });

This should solve your problem.

Besides this, to further enhance performance you can bind the event to a top level element say a UL instead of each LI. This would help you extract better performance too. Since you are using jQuery 1.4.2, you can easily use jQuery delegate for this.

Feel free to clarify any doubts.

Thanks,
Pranav Kaushik

pranavkaushik.wordpress.com

Upvotes: 3

shoebox639
shoebox639

Reputation: 2312

<script type="text/javascript">
  $(document).ready(function() {
     $(".component ol li").hover(function() {
          $(this).css('list-style-type', 'disc');
        }
     );
   });
</script>

If you don't have the document.ready, that gets executed before your list items get added to the DOM, so it basically does nothing. Or move that whole section to after the list items.

EDIT: per further discussion: It is best practice to not use document.ready, since it has to wait for everything on the page to finish loading to run. With that said, you can always put these 'initializing' blocks at the end of the html to make sure that all DOM objects are created when this is executed.

Or the second object is to use .live(). This function will attach an event to the result of the selector whenever an element that fits the selector is created. Now you can keep this block at the top and use:

<script type="text/javascript">
   $(".component ol li").live('hover', function() {
      $(this).css('list-style-type', 'disc');
   });
</script>

Now anytime something matches $(".component ol li") is added to the DOM, your hover function will get attached.

Upvotes: 9

Shikiryu
Shikiryu

Reputation: 10219

Well, it works for me w/o your css : link

Maybe you should show it to us.

Upvotes: 0

BrunoLM
BrunoLM

Reputation: 100322

Because you are selecting elements that doesn't exist yet.

This will execute before the element exist (this doesn't work)

<script></script>
<ul></ul>

This will execute after the element is rendered (this works)

<ul></ul>
<script></script>

If you want your script on top you have two choices:

  • Using $(function () { }): Adds an event on DOMready, it means the function will fire when all elements load.
  • Using $().live(): This is going to add an event on the window that will check the target, meaning it is going to work on any element added even after the page is loaded.

Reference

Upvotes: 2

tawfekov
tawfekov

Reputation: 5122

it will work once you write your javascript like this 

$(function(){

  $(".component ol li").hover(function() {
          $(this).css('list-style-type', 'disc');
      }
   );
})

Upvotes: 0

Related Questions