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>

使用jQuery克隆我的.tr_clone。在呈现HTML之后以及在克隆.tr_clone数据一次之后生成以下HTML。

    <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请求时，我无法在选择ie .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

我认为安德烈所得到的是你职能中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对象

在AJAX请求之后，这个失去了焦点

2 个答案: