is Click event permanent in jquery

Question

You are asking what does permanent mean, I don't know either, it's just the most accurate to describe my situation.
I have this html button :

<button type="button" 
        class="btn btn-primary btn-lg" data-follow="follow" 
        data-target="52cd6196211b6fc26a8b456c">

      <span class="glyphicon glyphicon-plus"></span>  
      Follow
</button>

I added a click event as follows :

 $("button[data-follow=follow]").click(function(e) {//scenario1});

in a given case , this code gets executed :

 $("button[data-follow=follow]").attr("data-follow","unfollow");

and I have this listner :

$("button[data-follow=unfollow]").click(function(e) {//scenario2});

when I click on the button again it fires scenario1, when it should fire scenario2 ?

Does anybody know anything about what's happening ?

Answer 1

Then we have to use event-delegation at this context,

$(document).on('click',"button[data-follow=follow]",function(e) {//scenario1});

$(document).on('click',"button[data-follow=unfollow]",function(e) {//scenario2});

See i had suggested document to implement event delegation but you should use any closest static parent in relative to the supplied selector.

Answer 2

After changing the attribute again you need to assign the click functionality

$("button[data-follow=follow]").attr("data-follow","unfollow");
immediate statement
$("button[data-follow=unfollow]").click(function(e) {//scenario2});

or you can use event deligation

$(document).on('click',"button[data-follow=follow]",function(e) {//scenario1});

$(document).on('click',"button[data-follow=unfollow]",function(e) {//scenario2});