Change glyphicon on click

Question

I am trying to change this glyphicon on click but it works fine when href = "#" but originally my href contains a url which through a view hits the database in django.

HTML:

<div class='hidden-lg'>

    <div class="content-header">
         <h1>
            <a id = "star" href="#" data-toggle="tooltip" title = "Add to your list" data-placement="top">
      <span class="glyphicon glyphicon-star-empty"></span>
  </a>
            </h1>

    </div>
</div>

JS:

$('#star').click( function(){

$(this).find('span').toggleClass('glyphicon glyphicon-star-empty').toggleClass('glyphicon glyphicon-star');

});

This works fine. http://jsfiddle.net/asees/5XqyW/564/

But when i change href to the below code, there is no change on glyphicon.

<a id = "star" href="{% url 'add' %}" data-toggle="tooltip" title = "Add to your list" data-placement="top">
      <span class="glyphicon glyphicon-star-empty"></span>
</a>

Answer 1

Working fiddle.

Since you're clicking on anchor #star you need to prevent the default event (redirecting to href) using e.preventDefault() like :

$('#star').click( function(e){
    e.preventDefault();

    $(this).find('span').toggleClass('glyphicon glyphicon-star-empty').toggleClass('glyphicon glyphicon-star');
});