Access $ (this) later in code

Question

I use ajax to create a small voting application. When you press +1 to vote for an item, the following code is run, adding it to the vote count, then php returns a reordered list of items by votes. I want the voted item to turn green. Color-changing code must be run after items have been reordered and retrieved.

The following is a block of code. The text between them discusses what this particular part does.

$(function(){ $(".plus").live('click', function() { var plus = $(this).data('plus'); var dataString = "plus="+plus; 

The next line of code receives the parent of the pressed button with the .heading class and animates its background color to green to show that it was voted. This works great, except that you only see it for a second, because when you successfully complete an item, they are retrieved and displayed again to reorder them by voice.

 $(this).parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100); $.ajax({ type: "POST", url: "bin/processButtons.php", data: dataString, success: function() { $.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(data) { var html = data['html']; $('#content') .html(data['html']) 

What I want to do is move the line of code here so that it animates the color AFTER the elements have been voted and then extracted. This does not work anymore, because $(this) needs to be done on the button immediately after it is pressed.

  $(this).parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100); }); } }); return false; }); }); 

Thanks.

Answer 1

Assuming I understand your question correctly, do you want to hold $ (this) for later use?

In this case, you should just save it in a variable:

 var reference = $(this); //A chunk of code. $.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(data) { //The HTML stuff... reference.parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100); } 

Gotta do it. If you define a link in a function, you must have access to it inside any AJAX success functions that you define inside that function (if that makes sense).

Another way to do this, as we discussed in the comments below, is to use your PHP to assign a specific ID to each answer and instead store a link to it ...

 var reference = $(this).attr("id"); //A chunk of code. $.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(data) { //The HTML stuff... $("#" + reference).parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100); } 

Answer 2

You can pass the context parameter to $.ajax to set the context manually.

 $.ajax({ context: this, url: ... }).done(function() { // $(this) still yields the clicked button }); 

Similarly, if you want to be strange, this is also true:

 $.ajax({ context: $, url: ... }).done(function() { this('#my-button').remove(); }); 

Do not do this. I just added it to show how the context parameter works.