Q:

$this lost focus after AJAX request

I have following CakePHP code :
<tr class="tr_clone">
      <td><?php echo $this->Form->input('items][',array('label'=>false,'options'=>$items,'class'=>'items')); ?> </td><td><?php echo $this->Form->input('price][',array('class'=>'price','label'=>false)) ?></td><td><?php echo $this->Form->input('unit][',array('class'=>'unit','label'=>false)) ?></td>
</tr>

Where my .tr_clone is cloned using jQuery. 
Following HTML is generated after rendering HTML and after cloning .tr_clone data one time.
    <table>
    <tr class="tr_clone">
       <td>
          <div class="input select">
           <select id="InvoiceItems][" class="items" name="data[Invoice][items][]">
           <option value="3">Item1</option>
           <option value="4">Item2</option>
           <option value="5">Item3</option>
           </select>
          </div>
      </td>
      <td>
         <div class="input text">
           <input type="text" id="InvoicePrice][" class="price" name="data[Invoice][price][]">
         </div>
      </td>
      <td>
         <div class="input text">
           <input type="text" id="InvoiceUnit][" class="unit" name="data[Invoice][unit][]">
         </div>
       </td>
    </tr>

    <tr class="tr_clone">
       <td>
          <div class="input select">
           <select id="InvoiceItems][" class="items" name="data[Invoice][items][]">
           <option value="3">Item1</option>
           <option value="4">Item2</option>
           <option value="5">Item3</option>
           </select>
          </div>
      </td>
      <td>
         <div class="input text">
           <input type="text" id="InvoicePrice][" class="price" name="data[Invoice][price][]">
         </div>
      </td>
      <td>
         <div class="input text">
           <input type="text" id="InvoiceUnit][" class="unit" name="data[Invoice][unit][]">
         </div>
       </td>
    </tr>
</table>

Now I am sending an AJAX request when focusout event occurs on select. After successful completion of AJAX request I want to populate my .price field. 
The problem is that when I am sending AJAX request I am unable to focus again on next element after select i.e. .price and fill it with returned value.
Following is my jQuery Code:
$("table").on('focusout','.items',function(){
      var id=$('.items option:selected').val();   
      $.ajax({
        method:'POST',
        url:"get_price",
        data:{id:id},
        success:function(result){           
               $(this).closest('.tr_clone').find('.price').text(result));
        }
      });
});

Here is fiddle.
Thanks in advance.

A:

Inside success callback context is the ajaxSettings object. That means that this inside this callback function will return $.ajaxSettings.
If you want to change the context of the success callback, for example for this to give you the DOM element, specify corresponding ajax option:
$("table").on('focusout','.items',function(){
  var id=$('.items option:selected').val();
  $.ajax({
    context: this, // <- equals to $("table")
    method:'POST',
    url:"get_price",
    data:{id:id},
    success:function(result){           
           $(this).closest('.tr_clone').find('.price').text(result));
    }
  });
});

