Question

I have an unordered list (UL) that I’m trying to bind a mouseover/mouseenter event on the list item (LI) children using .live() but keep getting the following JavaScript error:

Error: uncaught exception: Syntax error, unrecognized expression: )

Here’s my code:

<ul id="menu">
    <li>option 1
        <ul>
            <li>sub-option A</li>
            <li>sub-option B</li>
            <li>sub-option C</li>
            <li>sub-option D</li>
            <li>sub-option E</li>
        </ul>
    </li>
    <li>option 2</li>
    <li>option 3</li>
</ul>

The jQuery code:

$("#menu").children().live("mouseover", function(){
    // do something
});

The crazy thing is that when I change to the .mouseover() function it works just fine except for the issue with flickering associated with .mouseover() that the .live(“mouseover”, …) fixes.

Am I doing something wrong here? Is this a jQuery bug? Does anyone have any insight into this issue?

Answer 1

From the docs:

DOM traversal methods are not supported for finding elements to send to .live(). Rather, the .live() method should always be called directly after a selector

Which means you can’t do $("#menu").children().live(...) since .children() is a DOM traversal method.

Although a syntax error suggests that the code itself is problematic, i.e. not well formatted. As such the problem lies in code you didn’t post.

Finally, I suggest you just use delegate:

$('#menu').delegate('li', 'mouseover', function(){ ... });

Although you should really be doing a static bind unless you need live or delegate functionality. It’s not supposed to fix random flickering issues – you’re supposed to debug that yourself.