How to change an empty star glyphicon button to star glyphicon button onclick with JS?

Question

This seems to change the glyphicon only when I click glyphicon itself. I want it to change when I click the button.

<script>       
      $('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-star-empty glyphicon-star');
});     
    </script>

<button class="btn btn-default">
    <span class="glyphicon glyphicon-star-empty"></span>
  </button>

Answer 1

You can use this jQuery code.

$(document).ready( function() {
    $('.btn').click(function(){
        $(this).find('.glyphicon').toggleClass('glyphicon-star-empty glyphicon-star');
    });     
})

You have to bind the event on the button, not only the icon, else it will be triggered only clicking the star.