글리프콘을 클릭 할 때 변경하십시오.

Question

클릭하면이 글리프 콘을 변경하려고하는데 href = "#"하지만 원래 href에 django의 데이터베이스를 조회하는 URL이 포함되어 있으면 잘 작동합니다.

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'); 

}); 

이 잘 작동합니다. http://jsfiddle.net/asees/5XqyW/564/

하지만 href를 아래 코드로 변경하면 글리프콘이 변경되지 않습니다.

<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.

이 같은 e.preventDefault()를 사용하여 기본 이벤트 (href로 리디렉션)을 방지 할 필요가 #star 당신이 앵커를 클릭하고 이후 : 당신의 바이올린에`# 메뉴 - toggle`를 참조

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

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