$ 내가 CakePHP의 코드를 다음 한 AJAX 요청

Question

후이 포커스를 잃었 :

내 .tr_clone이 jQuery를 사용하여 복제되는

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

. HTML을 렌더링 한 후 .tr_clone 데이터를 한 번 복제 한 후 다음 HTML이 생성됩니다. focusout 이벤트가 select 발생할 때

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

는 지금은 AJAX 요청을 전송하고 있습니다. AJAX 요청이 성공적으로 완료되면 내 .price 필드를 채우고 싶습니다.

문제는 AJAX 요청을 보낼 때 다음 요소 (예 : .price)에 다시 집중할 수 없어 반환 값으로 채울 수 없다는 것입니다. 여기

$("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.

감사입니다 : 다음

는

내 jQuery를 코드입니다.

Answer 1

내부 success 콜백 컨텍스트는 ajaxSettings 개체입니다. 즉,이 콜백 함수 안에있는 this은 $.ajaxSettings을 반환합니다.

당신에게 DOM 요소를 제공하기 위해 this에 대한 예를 들어, success 콜백의 컨텍스트를 변경하려면, 해당 아약스 옵션 지정

$("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

을 내가 뭘 안드레이에서 점점 것은 당신의 상황에 맞는 생각 당신이 당신의 jQuery 객체를 참조 할 때 기능 문제는 this입니다

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

내부 this 변경 이제 익명 함수를 의미합니다. 그래서 우리가해야 할 일이 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 참조