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

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.

I removed the snippet. It makes no sense when there's nothing to execute. — Denys Séguret, Jul 16 '15 at 14:10
The problem why the solutions below won't work is because you're using the `onclick` attribute. When the `vote()` function is executed the value of `this` will already be `window`. As you're already using jQuery you should use [`.on()`](http://api.jquery.com/on/) instead - like in this [fiddle](http://jsfiddle.net/dbgmh2p2/1/) with a modified version of your markup+script — Andreas, Jul 16 '15 at 15:35

Denys Séguret · Answer 1 · 2015-07-16T15:51:44.133

3

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>';

edited Jul 16 '15 at 15:51

answered Jul 16 '15 at 14:09

Denys Séguret

372,613
87
782
758

Or using [`.bind()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) to set the value of `this` – Andreas Jul 16 '15 at 14:14
@Andreas yes. TBH it would be more useful to find a more complete existing QA and close this one as duplicate... – Denys Séguret Jul 16 '15 at 14:16
It looks like the context isn't the right one in the vote function either. How are you calling it ? – Denys Séguret Jul 16 '15 at 14:29
`<... onclick="vote(...)">` so `this` in `vote()` already is the `window` – Andreas Jul 16 '15 at 15:39
@Andreas I edited for this new information – Denys Séguret Jul 16 '15 at 15:52

wirey00 · Answer 2 · 2015-07-16T14:21:21.753

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)

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

2 Answers2