Vraag TypeScript: jQuery $ (this) gebruiken in een evenement


HTML:

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

In klassiek jQuery zou ik doen:

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

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

Om de data-id van het geklikte element

In TypeScript (in een klas) gebruik ik:

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

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

....
}

Hier krijg ik het geklikte element niet - $(this) is de instantie van de klas.

Wat heb ik verkeerd gedaan?


34
2018-04-03 16:12


oorsprong


antwoorden:


Volgens Schrijfmachine's spec "dit" verwijst naar het exemplaar van klasse waartoe de methode behoort / waarop wordt geroepen.

U zou het doelattribuut van het gebeurtenisobject kunnen gebruiken dat aan de callback wordt doorgegeven:

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

Of event.currentTarget afhankelijk van of je het element wilt krijgen waarop je hebt geklikt of het element dat de gebeurtenis heeft vastgelegd.


39
2018-04-03 16:24



Gebruik makend van event.currentTarget werkte voor mij toen ik probeerde een data-attribuut te krijgen van wat erop was geklikt.

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

17
2018-06-18 16:46



Door pijlfuncties te gebruiken (event) => TypeScript geeft je een lexicaal gebonden dit. (In gecompileerde code een eerder opgenomen exemplaar genaamd _this)

Als u overschakelt naar de syntaxis van vanilla-functies, moet u deze kunnen gebruiken $(this) zoals je normaal zou doen:

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

Natuurlijk heb je een probleem met de instantie van de testmethode die wordt aangeroepen, maar ik vond het de moeite waard om te delen.


4
2018-04-04 08:26