TypeScript: использование jquery $(this) в событии

HTML:

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

В классическом jQuery я бы сделал:

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

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

Чтобы получить data-id щелкнутого элемента

В TypeScript (в классе) я использую:

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

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

....
}

Здесь я не получаю элемент clicked - $(this) - это экземпляр класса.

Что я сделал не так?

Ответ 1

В соответствии с Typescript spec "this" ссылается на экземпляр класса, который принадлежит методу /.

Вы можете использовать целевой атрибут объекта события, переданного обратному вызову:

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

Или event.currentTarget в зависимости от того, хотите ли вы на самом деле нажать элемент или элемент, который захватил событие.

Ответ 2

Использование 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
}

Ответ 3

Используя функции стрелок (event) => TypeScript, вы лексически связали это. (В скомпилированном коде ранее захваченный экземпляр с именем _this)

Если вы переключитесь на использование синтаксиса функции ванили, вы сможете использовать $(this), как обычно:

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

Очевидно, что у вас возникла проблема с экземпляром вызываемого метода тестирования, но я думал, что стоит поделиться.