$this 在 AJAX 请求后失去焦点

Question

我有以下 CakePHP 代码：

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

我的.tr_clone 是使用 jQuery 克隆的。 下面的 HTML 是在渲染 HTML 和克隆一次.tr_clone 数据后生成的。

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

现在，当focusout 事件发生在select 时，我正在发送 AJAX 请求。成功完成 AJAX 请求后，我想填充我的 .price 字段。

问题是，当我发送 AJAX 请求时，我无法在选择后再次关注下一个元素，即 .price 并用返回值填充它。

以下是我的 jQuery 代码：

$("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));
        }
      });
});

这里是fiddle.

提前致谢。

Answer 1

在success 回调上下文中是ajaxSettings 对象。这意味着此回调函数中的this 将返回$.ajaxSettings。

如果你想改变success回调的上下文，例如this给你DOM元素，指定相应的ajax选项：

$("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));
    }
  });
});

Answer 2

我认为 Andrei 的意思是你的函数内部 this 变化的上下文

success:function(result){           
    $(this).closest('.tr_clone').find('.price').text(result));
}

问题是this 现在指的是您的匿名函数，而您希望它引用您的jQuery 对象。所以我们需要做的是proxy我们想要的上下文

$("table").on('focusout','.items',$.proxy(function(){
  var id=$('.items option:selected').val();
  $.ajax({
    context: this, // <- equals to $("table")
    method:'POST',
    url:"get_price",
    data:{id:id},
    success:$.proxy(function(result){           
    $(this).closest('.tr_clone').find('.price').text(result));
    }, this)
  });
}, this)); 

现在您的 this 引用应该引用正确的 jQuery 对象