使用jQuery更新按钮上的data-attr

Question

I'm trying to update the data-action attribute for the ('.follow') element to unfollow in the success response but it's not updating.

What am I doing wrong?

$('.follow').click(function() {
    var id = $(this).data("id");
    var action = $(this).data("action");
    var url = '/action/' + action;
    $.ajax({
        url: url,
        headers: {
            'TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
            id: id
        },
        type: "POST",
        success: function(v) {
            if (v.response == "OK") {
                $(this).data('action', 'unfollow');
            }
            if (v.response == "E") {
                alert('there was an error');
            }
        }
    });
});

EDIT

Adding the fact that the element in question is a button, as the offered solutions below are still not working.

<button class="follow" data-id="<?php echo $profile->id; ?>" data-action="follow">FOLLOW</button>

2nd EDIT

Just want to update this question in case anybody else finds themselves in a similar situation.

As it turns out, the accepted answer from Nir Tzezana was absolutely correct. The reason I couldn't get it to work was due to Firefox being buggy. It's not the first time something like this has happened, but I always forget that this could be an issue.

So, the moral of the story.. If you are using Firefox and you are confident that you have working code - yet it doesn't seem to be working - quit Firefox and reboot it (especially if you've had the browser open for a long time). Chances are your code was working the whole time.

Answer 1

$(this) refers to the return function.
Use a fat arrow function or this self trick.

$('.follow').click(function () {
   var id = $(this).data("id");
   var action = $(this).data("action");

   // Define self to be the .follow element
   var self = $(this);

   var url = '/action/' + action;

   $.ajax({

       url: url,
       headers: {
             'TOKEN': $('meta[name="csrf-token"]').attr('content')
       },
       data: {
           id: id
       },
       type: "POST",

       success: function(v){

           if (v.response == "OK") {

               self.data('action', 'unfollow');
           }

           if  (v.response == "E") {

               alert('there was an error');
           }
       }
   });

});

Answer 2

this deosn't refers to current element ie .follow in the $.ajax() success handler. You can use $.ajax() context option

$('.follow').click(function () {
    $.ajax({
        context: this,
        success: function(){
           //this: it will refer to clicked button
        }
    });
});

And Default action of <button> element is submit , if the button is wrapped in a form use type="button"

<button type="button" class="follow" data-id="<?php echo $profile->id; ?>" data-action="follow">FOLLOW</button>