nguyên cảo: Sử dụng jquery $ (this) trong trường hợp

Question

HTML:

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

Trong kinh điển jQuery tôi sẽ làm:

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

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

Để có được data-id của phần tử nhấp

Trong nguyên cảo (trong một lớp học) tôi sử dụng:

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

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

.... 
} 

Ở đây tôi không nhận được phần tử được nhấp - $(this) là phiên bản của lớp.

Tôi đã làm gì sai?

Answer 1

Theo Typescript's spec "this" là tham chiếu đến cá thể của lớp mà phương thức thuộc về/được gọi.

Bạn có thể sử dụng thuộc tính mục tiêu của đối tượng sự kiện truyền cho callback:

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

Hoặc event.currentTarget tùy thuộc vào nếu bạn muốn để có được những yếu tố thật sự nhấp vào hoặc các yếu tố đó bắt sự kiện này.

Answer 2

Bằng cách sử dụng các chức năng mũi tên (event) => TypeScript sẽ giúp bạn bị ràng buộc một cách từ từ. (Trong mã biên soạn một trường hợp bị bắt trước đây gọi là _this)

Nếu bạn chuyển sang sử dụng cú pháp chức năng vani bạn sẽ có thể sử dụng $(this) như thường lệ:

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

Rõ ràng bạn có một vấn đề với các trường hợp của phương pháp thử nghiệm được gọi nhưng tôi nghĩ rằng nó đáng để chia sẻ.

Answer 3

Sử dụng event.currentTarget đã làm việc cho tôi khi cố gắng lấy thuộc tính dữ liệu của những gì được nhấp.

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