dattiloscritto: utilizzando jQuery $ (this) nel caso in

Question

HTML:

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

Nel classico jQuery vorrei fare:

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

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

Per ottenere l'data-id dell'elemento cliccato

a macchina (in una classe) Io uso:

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

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

.... 
} 

Qui non viene visualizzato l'elemento su cui si fa clic: $(this) è l'istanza della classe.

Cosa ho fatto di sbagliato?

Answer 1

Secondo Typescript's spec "questo" si riferisce all'istanza di classe a cui appartiene il metodo /.

è possibile utilizzare l'attributo target dell'oggetto evento passato al callback:

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

O event.currentTarget a seconda se si desidera ottenere l'elemento effettivamente cliccato su o l'elemento che ha catturato l'evento.

Answer 2

Utilizzando le funzioni di freccia (event) => TypeScript è possibile assegnarlo in modo lessicale. (In codice compilato un'istanza acquisita in precedenza chiamato _this)

Se si decide di utilizzare sintassi funzione vaniglia si dovrebbe essere in grado di utilizzare $(this) come si farebbe normalmente:

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

Ovviamente si ha un problema con l'istanza del metodo di prova chiamato ma ho pensato che valesse la pena condividerlo.

Answer 3

L'utilizzo di event.currentTarget ha funzionato per me durante il tentativo di ottenere un attributo di dati di ciò che è stato fatto clic.

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