Frage TypeScript: Verwenden von jquery $ (this) im Ereignis


HTML:

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

In klassischen jQuery würde ich tun:

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

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

Um das zu bekommen data-id des angeklickten Elements

In TypeScript (in einer Klasse) verwende ich:

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

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

....
}

Hier bekomme ich nicht das geklickte Element - $(this) ist die Instanz der Klasse.

Was habe ich falsch gemacht?


34
2018-04-03 16:12


Ursprung


Antworten:


Gemäß Spezifikationen des Typoskripts "this" bezieht sich auf die Instanz der Klasse, zu der die Methode gehört.

Sie können das target-Attribut des Ereignisobjekts verwenden, das an den Callback übergeben wird:

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

Oder event.currentTarget abhängig davon, ob Sie das angeklickte Element oder das Element, das das Ereignis erfasst hat, erhalten möchten.


39
2018-04-03 16:24



Verwenden event.currentTarget funktionierte für mich, als ich versuchte, ein Datenattribut von dem zu erhalten, was geklickt wurde.

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



Durch die Verwendung von Pfeilfunktionen (event) => TypeScript gibt dir das lexikalisch gebunden. (Im kompilierten Code eine zuvor gefangene Instanz namens _this)

Wenn Sie zur Verwendung der Vanilla-Funktionssyntax wechseln, sollten Sie in der Lage sein zu verwenden $(this) wie du normalerweise würdest:

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

Offensichtlich haben Sie ein Problem mit der Instanz der Testmethode, die aufgerufen wird, aber ich dachte, sie wäre es wert, geteilt zu werden.


4
2018-04-04 08:26