$這個失去焦點AJAX請求

我有以下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之後以及在克隆.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請求時，我無法再選擇後面的下一個元素，即.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.

感謝。

來源

2014-02-25 عثمان غني

你不需要'代理（）'你的成功的功能？ – Machavity

Inside 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)); 
    } 
    }); 
});

來源

2014-02-25 18:11:47 Andrei

我不明白 –

我對每個克隆行都有相同的類。所以我無法做到。否則，這很容易。 –

@Echo，編輯更清晰的解釋。這現在有道理嗎？ – Andrei

我認爲安德烈是在得到你的背景你的函數

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

問題是this內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對象

來源

2014-02-25 18:18:49 Machavity

但它不是填充。價格 –

嗯，也許需要包裝'代理'的下一級以及 – Machavity

你可以更新小提琴請。 –

$這個失去焦點AJAX請求

回答

相關問題