打字稿：事件使用jQuery $（本）

HTML：

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

在經典的jQuery，我會做：

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

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

要獲得點擊的元素的data-id

在打字稿（一類）我用：

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

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

.... 
}

這裏我沒有得到點擊元素 - $(this)是這個類的實例。

我做錯了什麼？

來源

2014-04-03 mdunisch

你不會做任何錯誤 - 這是TypeScript有點太有用。在類內部的方法'this'被視爲總是引用相應的對象。所以你有兩個解決方案 - 或者用'event.target'屬性捕獲單擊的元素，或者定義該類之外的處理函數。 – raina77ow

正如我所看到的，大部分答案都是不完整或錯誤的。請訪問我的答案在這裏：http://stackoverflow.com/questions/38159416/using-the-this-in-event-handler-with-typescript/38159643?noredirect=1#comment63747929_38159643 –

根據Typescript's spec「this」指的是該方法所屬的類的實例/被調用。

您可以使用傳遞給回調事件對象的目標屬性：取決於如果你想獲得實際點擊的元素或捕獲事件的元素上

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

或者event.currentTarget。

來源

2014-04-03 16:24:00

我使用** $（「div 「）.on（」click「，」button「，（event）=> this.test（event））; **和在函數中： ** public test（element：JQueryEventObject）{$（element.target） } ** ....它的作品 - 謝謝你！ – mdunisch

@ user3351722：謝謝。這解決了訪問事件目標和類的實際問題。 – realbart

通過使用箭頭功能(event) => TypeScript給你一個詞彙綁定這個。（在編譯的代碼之前捕獲的實例調用_this）

如果您切換到使用香草函數的語法，你應該能夠使用$(this)，你通常會：

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

很明顯，你有一個問題與實例的測試方法被稱爲，但我認爲它值得分享。

來源

2014-04-04 08:26:11

我不得不使用這個答案而不是建議的答案，因爲我有同樣的問題試圖用我自己的擴展方法來擴展jQuery.fn，它沒有提供像'事件'這樣的可選參考。 – rushinge

使用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 
}

來源

2014-06-18 16:46:59 Billy

這對我有用！豎起大拇指！ –

也適合我！非常感謝 –

打字稿：事件使用jQuery $（本）

回答

相關問題