JQuery returns class to original when i click any part of the page

Question

I have 2 problems in this code, at first the span tag doesn’t work, it should be white when I click, just once, I would like when I click on the icons and colors anywhere on the page to the first stage, I have to click them before up to an asterisk and black.

Fiddle

$(".btn_body").click(function () {
      $(this).find('i').toggleClass('glyphicon-asterisk glyphicon-star').css( "color", "white" );
      $(this).find('span').css('color', 'white');
      if ($(".btn_body").not(this).find("i").hasClass("glyphicon-star")) {
          $(".btn_body").not(this).find("i").toggleClass('glyphicon-asterisk glyphicon-star').css( "color", "black" );
           $(this).find('span').css('color', 'black');
      }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="panel-body" id="myform">
    <div class="body-title">title</div>
    <div class="form-group">
        <div class="col-md-16">
            <button type="button" class="btn btn-lg dropdown-toggle btn_body" data-toggle="dropdown" aria-expanded="false"> <span id="users_label">users</span><i class="glyphicon glyphicon-asterisk"></i>

            </button>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-16">
            <button type="button" class="btn btn-lg dropdown-toggle btn_body" data-toggle="dropdown"> <span id="clients_label">clients</span>
 <i class="glyphicon glyphicon-asterisk"></i>

        </div>
    </div>
</div>

Run codeHide result

Answer 1

I did not fully understand your first problem, but for the second you can do something like

$( ".btn_body" ).focusout(function() {
    $(this).css('color', 'black');
    $(this).find('i').toggleClass('glyphicon-asterisk glyphicon-star').css( "color", "black" );
})

If you look at this example script , you will see the result.

Always if it's fiddle , if you uncomment line 2 (which I added)

$(this).css('color', 'white');

?

Answer 2

, :

  $(".btn_body").click(function () {
      $(this).find('i').toggleClass('glyphicon-asterisk glyphicon-star');
      if ($(this).find("i").hasClass("glyphicon-star")) {
          $(this).find("i").css( "color", "white" );
      } else{
        $(this).find("i").css( "color", "black" );
      }
  });

$(document).on("click",function(e){
    var $target = $(e.target);
    var isTargetClick = !$target.add($target.parents()).is(".btn");
    if(isTargetClick){
    $(this).find('i').attr("class",'glyphicon glyphicon-asterisk').css( "color", "black" );
    }
});

DEMO

Answer 3

.

$(document).on("click",function(e){
    var $target = $(e.target);
    var isTargetClick = !$target.add($target.parents()).is(".btn");
    if(isTargetClick){
    $(this).find('i').attr("class",'glyphicon glyphicon-asterisk').css( "color", "black" );
    }
});

Answer 4

('click', '# id', function() {...} click().

$(document).on('click','.btn_body',function () {
      $(this).find('i').toggleClass('glyphicon-asterisk glyphicon-star').css( "color", "white" );
      $(this).find('span').css('color', 'white');
      if ($(".btn_body").not(this).find("i").hasClass("glyphicon-star")) {
          $(".btn_body").not(this).find("i").toggleClass('glyphicon-asterisk glyphicon-star').css( "color", "black" );
           $(this).find('span').css('color', 'black');
      }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="panel-body" id="myform">
    <div class="body-title">title</div>
    <div class="form-group">
        <div class="col-md-16">
            <button type="button" class="btn btn-lg dropdown-toggle btn_body" data-toggle="dropdown" aria-expanded="false"> <span id="users_label">users</span><i class="glyphicon glyphicon-asterisk"></i>

            </button>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-16">
            <button type="button" class="btn btn-lg dropdown-toggle btn_body" data-toggle="dropdown"> <span id="clients_label">clients</span>
 <i class="glyphicon glyphicon-asterisk"></i>

        </div>
    </div>
</div>

Hide result

Answer 5

, , .

, , (, ) ;

 $('body').on('click', '*', function(){
   // remove any instance of the 'glyphicon-star' class
   $('.glyphicon-star').removeClass('glyphicon-star');
 })