maszynopis: jQuery $ (this) w przypadku

Question

HTML:

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

W klasycznym jQuery zrobiłbym:

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

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

Aby uzyskać data-id elementu klikniętego

W maszynopisie (w klasie) Używam:

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

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

.... 
} 

Tutaj nie dostaję klikniętego elementu - instancja klasy to $(this).

Co zrobiłem źle?

Answer 1

Zgodnie z Typescript's spec "this" odnosi się do instancji klasy, do której należy metoda/jest wywoływana.

Można użyć atrybutu target obiektu zdarzenia przekazany do wywołania zwrotnego:

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

Albo event.currentTarget zależności od tego czy chcesz uzyskać element kliknęli lub element, który przechwyconego zdarzenia.

Answer 2

Za pomocą funkcji strzałek (event) => TypeScript daje ci to leksykalnie. (W kodzie sporządzoną wcześniej ujęte instancja o nazwie _this)

Jeśli przełączyć się na używanie składni funkcji wanilia powinieneś być w stanie korzystać $(this) tak jak zwykle:

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

Oczywiście masz problem z instancji metody testowej, ale uznałem, że warto ją udostępnić.

Answer 3

Użycie dla mnie event.currentTarget przydało mi się, gdy próbowałem uzyskać atrybut danych z tego, co zostało kliknięte.

$('.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 
}