jQuery로 콜백 함수에 이벤트 데이터 전달

Question

event.data를 사용하여 이벤트가 발생한 요소의 값을 반환하는 방법을 이해하는 데 어려움이 있습니다. 여기에 내 예 :

<a href="#" class="dw_add"> 
    <img src="http://something" /> 
</a> 

var callback = function(event){ console.log(event.data.src) } 

$('.dw_add') 
    .on('click', { src: $(this).find('img').attr('src') },callback); 

$이 문서는 현재 참조하고 있지만 클릭하지 않았습니다. 다행히도 내가하려는 일을 볼 수는 있지만 자바 스크립트 지식은 제한적이다. PHP 사고 방식으로 접근하고 있다고 생각한다.

'img src'값을 콜백에 전달하는 방법에 대한 아이디어가 있으십니까?

Answer 1

당신은 기능 범위에 있지, 그래서 이 :

$('.dw_add').on('click', { src: $(this).find('img').attr('src') },callback); 

$로 (이) 작동하지 요소는 등 클릭 된 요소, 아니 event.target 또는 event.data에 대한 로컬 범위가 없기 때문입니다 생각하지 않습니다 기음! 그것은 "이"에 대한 요소 및 범위에 대한 직접적인 참조를 갖는 한

그러나이 작동 문제가되지 않는다 :

var callback = function(event){ console.log(event.data.src) } 
var elm = $('.dw_add'); 
elm.on('click', { src: elm.find('img').attr('src') },callback); 

이 함수의 범위 내에있는 (이) $로 작동한다 : 그것은 기능 범위 안에 다시하고 타겟 요소에 대한 참조를 갖는 한

function callback(a){ console.log(a) } 

$('.dw_add').on('click', function() { 
    var a = $(this).find('img').attr('src'); 
    callback(a); 
});​ 

또한, 콜백 함수 안에 사용 $ (이)가 작동 할 것이다.

Answer 2

왜 같은 것을 할 수 없습니다 :

jQuery를 이벤트 핸들러에서

var callback = function(event){ console.log($(this).find('img').attr('src')) } 

$('.dw_add') 
    .on('click', callback); 

Answer 3

, this는 이벤트를 트리거 DOM 요소로 설정됩니다. <a> 요소에 이벤트 핸들러를 연결하면 this이 링크가됩니다. 당신이 img의 src을 얻고 싶다면

, 당신은 find() 또는 children()를 사용하여 트리거 a의 img 요소를 발견 할 것이다 :

$('.dw_add').on('click', function(e) { 
    $(this).children('img').attr('src'); 
});