0

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?

2
  • are you inserting the list items dynamically ?
    – Rafay
    Jul 20, 2011 at 22:09
  • you are missing a ; at the end of jquery code ... just in case.
    – Rafay
    Jul 20, 2011 at 22:11

2 Answers 2

3

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.

0
0

if you are not inserting the list items dynamically to the DOM in my opinion you dont need to use the .live as far as the flickering problem you are facing is probably because the mouseover bubbles instead if you use mouseenter you will be fine ...

$("#menu").children().bind("mouseenter",function(){
    // do something
});
2
  • This should use delegate() on #menu. Jul 20, 2011 at 22:26
  • the delegated version is already given by davin see the answer below thats why im not including it in my answer
    – Rafay
    Jul 20, 2011 at 22:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.