0

I want to change the title attribute of the fontawesome icon when clicked. So when testing it out, it seemed to work fine because the classes get switched everytime, but the title change only works for the first click. 

$(document).ready(function(){
    $(".fa-bookmark").click(
     function(){
        $(this).attr('title', "Add to bookmark")
        $(this).toggleClass("fa-bookmark fa-bookmark-o");
      }
    );

    $(".fa-bookmark-o").click(
      function(){
        $(this).attr('title', "Remove from bookmark");
        $(this).toggleClass("fa-bookmark-o fa-bookmark");
      }
    );
});
.fa{
    cursor: pointer;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.fa:hover{
 color: blue;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<i class="fa fa-bookmark" title="Remove from bookmark"></i>
</body>
</html>

How do I fix it that the title changes everytime? Any bit of help is appreciated.

YTZ
  • 876
  • 11
  • 26
  • the second event click will never work since intially the element with that class is not present .. apply the click event on `fa` for example or use event delegation – Temani Afif Jul 01 '18 at 21:32
  • 1
    @TemaniAfif thanks for the duplicate link; fixed my issue – YTZ Jul 01 '18 at 21:48

0 Answers0