아약스를 사용하여 버튼의 상위 div의 ID 제출

Question

AJAX를 사용하여 버튼이있는 상위 DIV의 ID를 제출하려고합니다. 이 마크 업입니다 :

<div id="32"><input id="button" type="button" class="before" onclick="add_fav();" /></div> 

이는 현재 상태에서 아약스 스크립트입니다 :이 작동하지 않습니다

<script> 
function add_fav() 
{ 
jQuery.ajax({  
     url: 'addfav.php', 
     type: 'POST', 
     data: {'id':jQuery(this).closest("div").attr("id"),is_ajax: 1}, 
     success: function(html) { 
     jQuery('#button').removeClass('before'); 
     jQuery('#button').addClass('after'); 
     jQuery('#button').attr('disabled', 'disabled'); 
     }, 
     error: function() { 
     jQuery('#error').html('<div>Error! Unable to add food item.</div>'); 
     } 
    }); 
} 
</script> 

그래서 내가 DIV의 ID를 전달하는 데 사용하고있는 방법은 분명히 맞지 않아. 아마도 누군가 나를 똑바로 댈 수 있겠는가?

Answer 1

함수에 클릭 된 항목에 대한 참조 통과 인라인 클릭 핸들러를 사용하는 경우 : 다음

onclick="add_fav(this);" 

:

function add_fav(btn) 
{ 
    jQuery.ajax({  
     url: 'addfav.php', 
     type: 'POST', 
     data: {'id':jQuery(btn).closest("div").attr("id"),is_ajax: 1}, 
     success: function(html) { 
     jQuery('#button').removeClass('before'); 
     jQuery('#button').addClass('after'); 
     jQuery('#button').attr('disabled', 'disabled'); 
     }, 
     error: function() { 
     jQuery('#error').html('<div>Error! Unable to add food item.</div>'); 
     } 
    }); 
} 

this가 클릭 된 요소를 참조 않는 인라인 속성 내에서, 그러나 .call() 또는 .apply()을 사용하여 조치를 취하지 않는 한, 전화 할 기능 내에 있지 않습니다.

jQuery("input.before").click(function(){ 
    jQuery.ajax({  
     url: 'addfav.php', 
     type: 'POST', 
     data: {'id':jQuery(this).closest("div").attr("id"),is_ajax: 1}, 
     success: function(html) { 
     jQuery('#button').removeClass('before'); 
     jQuery('#button').addClass('after'); 
     jQuery('#button').attr('disabled', 'disabled'); 
     }, 
     error: function() { 
     jQuery('#error').html('<div>Error! Unable to add food item.</div>'); 
     } 
    }); 
}); 

을 ... 그리고 jQuery를 확실히 this가 적절하게 설정되어 있습니다, 또한 당신의 onclick 인라인을 필요로하지 않습니다

그러나, 나는 jQuery를 함께 이벤트 처리기를 바인딩 권 해드립니다. 위 코드를 document.ready 핸들러 나 버튼 뒤에 나타나는 스크립트 블록 (예 : 본문 끝 부분)에 넣으십시오.

Answer 2

요소를 함수에 매개 변수로 전달하면 함수에서 사용할 수 있습니다. onclick="add_fav(this);"

<script> 
function add_fav(element) 
{ 
jQuery.ajax({  
     url: 'addfav.php', 
     type: 'POST', 
     data: {'id':jQuery(element).closest("div").attr("id"),is_ajax: 1}, 
     success: function(html) { 
     jQuery('#button').removeClass('before'); 
     jQuery('#button').addClass('after'); 
     jQuery('#button').attr('disabled', 'disabled'); 
     }, 
     error: function() { 
     jQuery('#error').html('<div>Error! Unable to add food item.</div>'); 
     } 
    }); 
} 
</script> 

당신은 아직도 당신이 function.call(), onclick="add_fav.call(this);"를 사용하고 당신이 그것을 얼마나 add_fav를 사용할 수있는 기능에 this을 사용합니다.