는 타이프 : 이벤트에

HTML JQuery와 $ (이) 사용 : 고전 jQuery를에는 타이프 : 이벤트에

<div> 
<button data-id="3">Click Me</button> 
</div>

을 내가 할 것 :

$("div").on("click","button", test); 

function test(){ 
    alert($(this).data("id")); 
}

가 클릭 된 요소의 data-id를 얻으려면

타이프 라이터에서 (수업 시간에) 나는 다음을 사용합니다 :

class foo { ... 
$("div").on("click", "button", (event) => this.test()); 

public test(){ 
    alert($(this).data("id")); // "undefined" 
    console.log($(this)); 
} 

.... 
}

클릭 한 요소가 없습니다. $(this)이 클래스의 인스턴스입니다.

내가 뭘 잘못 했니?

출처

2014-04-03 mdunisch

잘못된 것은 아닙니다. TypeScript는 너무 유용합니다. 내부 클래스 메소드'this'는 항상 대응 객체를 참조하는 것처럼 처리됩니다. 그래서 당신은 두 가지 해결책을 가지고 있습니다 - 클릭 된 요소를'event.target' 속성으로 잡거나 그 클래스 외부에서 핸들러 함수를 정의하십시오. – raina77ow

제가 볼 수 있듯이 대부분의 답변은 불완전하거나 잘못되었습니다. 내 대답은 여기를 방문하십시오 : http://stackoverflow.com/questions/38159416/using-the-this-in-event-handler-with-typescript/38159643?noredirect=1#comment63747929_38159643 –

Typescript's spec에 따르면 "this"는 메소드가 속한/호출되는 클래스의 인스턴스를 나타냅니다.

class foo { 
    public test(evt){ 
    alert($(evt.target).data("id")); // "undefined" 
    console.log($(evt.target)); 
    } 
}

또는 event.currentTarget가 실제로 클릭 요소 또는 이벤트를 캡처 한 요소를 얻으려면에 따라 :

당신은 콜백에 전달되는 이벤트 객체의 대상 속성을 사용할 수 있습니다.

출처

2014-04-03 16:24:00

나는 ** $ ("div ") .on ("click ","button ", (event) => this.test (event)); ** 함수에서 : ** public test (element : JQueryEventObject) {$ (element.target) } ** ** 작동합니다 - 감사합니다! – mdunisch

@ user3351722 : 감사합니다. 이렇게하면 이벤트 대상과 클래스 모두에 액세스하는 실제 문제가 해결됩니다. – realbart

화살표 기능을 사용하면 (event) => TypeScript이 당신에게 어휘 적으로 묶여 있습니다. 당신은 바닐라 함수 구문을 사용하도록 전환하는 경우

당신은 $(this)을 사용할 수 있어야합니다 (컴파일 된 코드에서 이전에 캡처 인스턴스가 _this라고도 함)과 같이 평소 : 분명히

$("div").on("click", "button", function(event) { this.test()});

인스턴스에 문제가

테스트 메소드가 호출되고 있지만 공유 할 가치가 있다고 생각했습니다.

출처

2014-04-04 08:26:11

jQuery.fn을 확장 메서드로 확장하려고 할 때 동일한 문제가 있었기 때문에 제안 된 답변보다는이 대답을 사용해야했습니다.이 방법은 이벤트와 마찬가지로 'this'에 대한 대체 참조를 제공하지 않습니다. – rushinge

event.currentTarget을 사용하면 클릭 한 데이터 속성을 얻으려고 할 때 유용했습니다.

$('.elementID').click(e => this.clickedElement(e)); 


clickedElement(e: JQueryEventObject) { 
    var iWasClickedData = $(this).data('key'); // will not work 
    var iwasClickedDataFixed = $(e.currentTarget).data('key'); // will work 
}

출처

2014-06-18 16:46:59 Billy

이것은 나를 위해 일했습니다! 엄지 위로! –

나를 위해 일했습니다! 고마워. –

는 타이프 : 이벤트에

답변

관련 문제