control_td.each(function(){
$.ajax({
  url: 'control.php?udid='+$(this).attr('udid'),
  cache: false,
  async: true
}).done(function(data) {
  $(this).html(data);
});
});

but $this doesn't work in .done sub function. what am I doing wrong here?

control_td.each(function(){
$.ajax({
  url: 'control.php?udid='+$(this).attr('udid'),
  cache: false,
  async: true
}).done(function(data) {
  $(this).html(data);
});
});

but $this doesn't work in .done sub function. what am I doing wrong here?

• javascript
• jquery

3 Answers 3

Its because this doesn't refer to the element item in the callback.

Try closing around a new value.

control_td.each(function(){
var $self = $(this); // magic here!
$.ajax({
  url: 'control.php?udid='+$(this).attr('udid'),
  cache: false,
  async: true
}).done(function(data) {
  $self.html(data);
});
});

Try this:

control_td.each(function () {
    var $this = $(this);
    $.ajax({
        url: 'control.php?udid=' + $this.attr('udid'),
        cache: false,
        async: true
    }).done(function (data) {
        $this.html(data);
    });
});

You could also set the context option of the $.ajax, check this option.

control_td.each(function(){
  $.ajax({
    url: 'control.php?udid='+$(this).attr('udid'),
    cache: false,
    async: true,
    context: this
  }).done(function(data) {
    $(this).html(data);
  });
});