The hover works but the keyup or keydown skips over li elements, why and how to fix this?

Posted on 2011-10-07
Last Modified: 2012-05-12
I have a list of li elements that gets loaded from the server. On the first load of the ul li, the can hit the keyup or keydown to scroll up and down the list with no problems.

On second load of the ul li list (around 8 li elements), it skips elements. For elements, it correctly highlight the first element (index 0) but skips to the next (index 1). What I mean by skip is that it correctly highlight the skip element (index 1) but does not stop to at this skipped element and keeps going to element of index 2.

On second load of li
<li>aaaaa</li>  // highlighted and stopped
<li>bbbbb</li> // highlighted but move to li cccccccc
<li>ccccccc</li> // highlight and stopped
<li>ddddd</li> // highlight but move to li, next....

How can I get it to stop skipping? I can all is working when I put alerts...
Question by:areyouready344

    Expert Comment

    It helps is you post the code you are using so we can help you figure out what's going wrong ...

    Accepted Solution

    this event solved the problem, e.stopImmediatePropagation();

    Author Closing Comment

    I originally had e.stopPropagation(); and changed it to e.stopImmediatePropagation(); and the skipped element no longer gets skipped.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    24 Experts available now in Live!

    Get 1:1 Help Now