Question

hey I have this silly issue and I hope you could help me to solve it. I have some “a” elements and I just want to add an active class when clicked.

I tried this :

<a href="javascript:mifunction()"></a>

js:
function mifunction(){
 $(this).addClass('active');
}

but it doesn’t work, so I tried this:

<a></a>

js:
$('a').click(function() {
  $(this).addClass('active');               
});

It doesn’t work either. It just worked when I mixed both. But users have to dubbleclick the element, which is not an option:

<a href="javascript:mifunction()"></a>
js:

function mifunction(){
 $('a').click(function() {
   $(this).addClass('active');              
 });
}

Do you have any idea of how to solve this?

Thank you very much!

Answer 1

It is working here with your 2nd example:

• 
  

  Demo

May be you need to wrap your jQuery code in :

$(function() {

  $('a').click(function() {
     $('a.active').removeClass('active'); // you may also want to remove previous
     $(this).addClass('active');               
  });

});

Also make sure that you included jQuery library path in your HTML:

<script type="text/javascript" src="/path/jQuery.min.js"></script>

OR:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

EDIT:

(Links are added dynamically)

$(function() {

  $('a').on( 'click', function() {
     $('a.active').removeClass('active'); // you may also want to remove previous
     $(this).addClass('active');               
  });

});