Geek Answers Handbook

Why does jQuery not trigger my hang event?

I'm not sure why my event isn’t shooting? I just want to change the style of the list when the user hovers over li. It doesn't seem like I'm missing something, but nothing happens.

<%@ 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>
+4
source share
6 answers
 <script type="text/javascript"> $(document).ready(function() { $(".component ol li").hover(function() { $(this).css('list-style-type', 'disc'); } ); }); </script>

If you don't have document.ready, it will be executed before your list items are added to the DOM, so it does practically nothing. Or move the entire section after the list items.

EDIT: for further discussion: it's best not to use document.ready , as it should wait until everything on the page finishes loading. With this in mind, you can always put these initialization blocks at the end of html to make sure that all DOM objects are created when this is done.

Or the second object should use .live() . This function attaches the event to the result of the selector whenever an element is created that is suitable for the selector. Now you can save 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, when something that matches $(".component ol li") added to the DOM, your hover function will be bound.

+9
source

I would recommend using first

  $(document).ready(function(){ //your code here });

This should solve your problem.

In addition, to further improve performance, you can bind an event to a top-level element, such as UL, instead of each LI. This will help you get the best performance. Since you are using jQuery 1.4.2, you can easily use the jQuery delegate for this.

Feel free to clarify any doubts.

Thanks,
Pranav Kaushik

pranavkaushik.wordpress.com

+3
source

Because you select items that do not yet exist.

This will be executed before the element exists (this does not work)

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

This will be done after the item is rendered (this works)

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

If you want your script on top, you have two options:

  • Using $(function () { }) : adds an event to DOMready, which means that the function will fire when all elements are loaded.
  • Using $().live() : this will add an event to the window that will check the target, which means that it will work on any element added even after the page loads.

Link

+2
source

it will work as soon as you write your javascript like this

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

Well, this works for me without your css: link

Maybe you should show it to us.

0
source

You can use the $ .delegate method to create a mouseenter event handler and a mouseleave event handler to control the freezing effect. I know that you did not define a hover off handler in your code, but here is how you do it using a delegate that will work anytime when 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'); });
0
source

More articles:


All Articles