li inside ul inside li

Question

I'm using a menu which has this basic structure:

<ul id="nav">
 <li><a href="index.php?location=home" id="home_link">HOME</a></li>
 <li id="movies_link_li"><a href="#" class="movies_link">MOVIES</a>
  <ul id="movies_submenu">
   <li><a href="#" id="insert_movie_link">Insert movie</a></li>   
   <li><a href="#" id="movie_images_link">Movie images</a></li>
   <li><a href="#" id="random_movie_link">Random movie</a></li>
  </ul>
 </li>
</ul>

...and a css like this:

.current {background: #FFFFFF;}

I then use jquery and ajax to go to the different pages of my site, like this:

<script type="text/javascript" language="javascript">
$.ajaxSetup({cache: false});

$(document).ready(function()
{       
    $(".movies_link").click(function(event){
        $("#conteudo").load("applet_movies.php",{'size':"fullscreen"});
        $('li').removeClass('current');$('#movies_link_li').addClass('current');
        $('#movie_images_link').removeClass('current');
        }); 
});
</script>

I am able to set the class "current" on the clicked menu item, but on IE (version 8) all the 'li' under the clicked 'li' inherit the same class, which messes up the menu. None of the other browsers are doing this.

Is there any way to stop IE from setting the 'current' class to all the 'li' under the clicked 'li'?

I just tried these other methods, but none worked:

$(".movies_link").click(function(event){
        $("#conteudo").load("applet_movies.php",{'size':"fullscreen"});
        $('li').removeClass('current');
        $('#movies_link_li').addClass('current');
        $('#movie_images_link').removeClass(); //jquery remove all classes from element, didn't work.
        $('#movies_link_li').children().removeClass('current'); //nothing...
        $('#random_movie_link').removeClass('current'); //also nothing...
        $('#movie_images_link').addClass('normalmenuitem'); //explicitly set another class / override - also nothing happened! :(
});

Answer 1

Try adding event.stopPropagation() to your click handler.

$(".movies_link").click(function(event){
  event.stopPropagation();
  //...
});