使用jQuery $（this）.addClass不起作用，简单代码不起作用

Question

this simple code is not working, just trying to add a class once clicked on.

    $('a').click(function(){    
      //alert('on'); WORKING
      $(this).addClass('on');
    })

The HTML is simply..

    <ul>
 <li><a href="">List Item 1</li>
 <li><a href="">List Item 2</li>
 <li><a href="">List Item 3</li>
 <li><a href="">List Item 4</li>                        
   </ul>

Answer 1

You didn't ever close your <a> , but it's working for me otherwise.

http://jsfiddle.net/L3nyE/

<ul>
    <li><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
    <li><a href="#">List Item 4</a></li>                        
</ul>

CSS:

.on { background-color:red; }

jQuery:

$('a').click(function(){    
      //alert('on'); WORKING
      $(this).addClass('on');
});

Answer 2

Prevent the default behaviour

$('a').click(function(event){
  event.preventDefault();    
  $(this).addClass('on');
});

Answer 3

Works for me, provided you either change the target of the links to "#" . (Or return false from the click handler.)

http://jsfiddle.net/jaNCq/1/

You never close your <a> 's but Firefox is smart enough to close them for you. Can't say for other browsers though.

Answer 4

Your code working fine, check so you load your code when the dom is loaded and ready. Working example

$(document).ready(function(){ 
    $('a').click(function(){    
         $(this).addClass('on');
    });
});

Answer 5

Your HTML is Incorrect

<ul>
<li><a href="#">List Item 1</a></li>
 <li><a href="#">List Item 2</a></li>
 <li><a href="#">List Item 3</a></li>
  <li><a href="#">List Item 4</a></li>                        

Demo

Answer 6

Don't forget to close your "a" tags. Also add a ";" at the end of your jQuery function.

Answer 7

Make sure you have the jquery lib referenced and wrap your code in the dom ready. This worked for me.

<style>
    .on{
        color:red;
    }
</style>
<script>

    $(function () {
        $('a').click(function () {
            //alert('on'); WORKING
            $(this).addClass('on');
        })
    });
</script>