jQuery $(this) does not work at all in my codes? [duplicate]

Question

jQuery $(this) does not work at all in my codes, here are the codes. The codes sending from my HTML is an image's onlick 'vote', located in a tb element of table.

function vote(type, value, musicId) {
  var dataFields = {
    'type': type,
    'value': value,
    'musicId': musicId
  };
  $.ajax({
    type: "POST",
    url: "ajax/voting.php",
    data: dataFields,
    timeout: 3000,
    success: function(dataBack) {
      $(this).css("background-color", "rgba(255,255,0,0.7)");
    },
    error: function() {
      $('#message').text('Problem!');
    }
  });
}

HTML & PHP codes:

echo '<td class="up"><img class="liked" onclick="vote(\'liked\', \'1\', '.$single_music['id'].'); return false;" src="img/layout/like.png"></td>';

 echo '<td class="down"><img class="favorite" onclick="vote(\'favorite\', \'1\', '.$single_music['id'].'); return false;" src="img/layout/favorite.png"></td>';

What i want to do?

Because there are multiple items generated from database, and i want to let the jquery tell them apart when i click the vote image in some item.

Could you please help me find where the error is? Thanks.

Answer 1

this, in your callback, is window. The usual solution is to save the external this in a variable.

But part of your problem is you're inlining event handlers and not passing the element so this, in vote, isn't even the element. The best solution would be to avoid using inlining javascript (for example set data-attributes with the relevant music id) but a working solution would be this:

function vote(element, type, value, musicId) {
    var dataFields = {'type': type, 'value': value, 'musicId': musicId};
    $.ajax({
        type: "POST",
        url: "ajax/voting.php",
        data: dataFields,
        timeout: 3000,
        success: function(dataBack){
                $(element).css("background-color","rgba(255,255,0,0.7)");
        },
        error: function() {
            $('#message').text('Problem!');
        }
    });
}

echo '<td class="down"><img class="favorite" onclick="vote(this, \'favorite\', \'1\', '.$single_music['id'].'); return false;" src="img/layout/favorite.png"></td>';

Answer 2

An alternate solution to Denys would be to pass this as the context

$.ajax({
    type: "POST",
    url: "ajax/voting.php",
    data: dataFields,
    timeout: 3000,
    context: this, // <-----
    success: function(dataBack) {
      $(this).css("background-color", "rgba(255,255,0,0.7)");
    },
    error: function() {
      $('#message').text('Problem!');
    }
});

In your example thought it's hard to figure out what exactly this is because we don't know what context you're using it in.

If you're just calling the function then this refer's to window - and the this inside the ajax function refers to window

vote(a,b,c); 

If you're passing the function in as a callback to an event handler then this refers to the element and the this inside the ajax success function refers to window. So you need to cache it or pass it as the context

$(element).on('click',vote)