Strange behavior when using .live with mouseenter & mouseleave

Strange behavior when using .live with mouseenter & mouseleave

I am just wondering if I am doing something wrong, but it looks like a bug to me - when using this code the submenu is displayed, then if I used bind - everything works, if I instead went for live, when I try to hover the submenu it disappears. I guess it has something to do with the live event not being handled properly (mouseout fires when leaving the parent LI and entering the first LI child of the UL child, but mouseleave should not fire because the LI child is actually contained in the mouseout-ed LI)

  1. <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "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
     */
    $(function () {
        $("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>

















































I would really rather use .live than bind because the menu I am building will be changed constantly. This is a much simplified version of the code I am working with.
Actually the live event will be bound to the root of the menu, it may be bound only to elements that actually contain ULs, etc.

Thank you for any help or pointers.

Kindest regards,
Ivan