jQuery: Why does my click event on a li element not work?

html-lists, jquery, jquery-animate

Solution

The code works fine as you expect, view the JSFiddle.

I have a feeling your forgetting something like putting it in the jQuery DOM Ready event.

Make sure you code looks like this (inside the DOM Ready)

$(document).ready(function(){ // When the DOM is Ready, then bind the click
    $("#nav ul li").click(function(){
        $("#nav").animate({ 
            marginLeft: "-300px",
        }, 1000 );
    });
});

Make sure you have no other javascript errors on your page (If you do before this code, the code will not work), Check your console (In chrome right click > Inspect Element > console).

One of these 2 issues are causing your problems (most likely), else you will have to debug it yourself (or show us more code).

Problem

I want to move the Div-element "nav", when a li-element was clicked. I have a List in a div ``` <div id="nav"> <ul> <li><a href="#t1">Flyer</a></li> <li><a href="#t2">Code</a></li> <li><a href="#t3">Angebot</a></li> <li><a href="#t4">Bilder</a></li> </ul> </div> ``` Why doesnt this work in jquery: ``` $("#nav ul li").click(function(){ $("#nav").animate({ marginLeft: "-300px", }, 1000 ); }); ```

Original source