Ticket #6096 (closed bug: duplicate)
Strange behavior when using .live with mouseenter & mouseleave
| Reported by: | dragon | Owned by: | |
|---|---|---|---|
| Priority: | Milestone: | 1.4.2 | |
| Component: | event | Version: | 1.4.1 |
| Keywords: | mouseleave mouseenter live | Cc: | |
| Blocking: | Blocked by: |
Description
The same code works with bind, but does not work with live. I guess the origin is not checked (jQuery does not check if the element is contained).
- <!DOCTYPE html
PUBLIC "-W3CDTD XHTML 1.0 StrictEN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css" media="screen">
ul, li { list-style-type:none; margin:0; padding:0; display:block; width:100px; }
ul { background:red; }
li { line-height:20px; background:silver; position:relative; }
li ul { display:none; position:absolute; left:100%; top:0; }
</style>
<script type="text/javascript" src="jquery-1.4rc1.js"></script>
<script type="text/javascript">
/*
- THIS WORKS */
$("li")
.bind("mouseenter", function () { $(this).children("ul").show(); }) .bind("mouseleave", function () { $(this).children("ul").hide(); });
}); */
/*
- THIS DOES NOT
$(function () {
$("li")
.live("mouseenter", function () { $(this).children("ul").show(); }) .live("mouseleave", function () { $(this).children("ul").hide(); });
}); */ </script> </head>
<body> <ul>
<li>no submenu</li> <li>has submenu
<ul>
<li>subitem 1</li> <li>subitem 2</li> <li>subitem 3</li>
</ul>
</li> <li>no submenu</li>
</ul> </body> </html>
Change History
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
This has already been fixed and will be in jQuery 1.4.2.