jQuery .on事件處理程序和ES2015箭頭函數

我正在將我的一個項目轉換爲使用ES2015，但是當涉及到jQuery的.on事件處理程序時，我遇到了一個問題，要處理'this'關鍵字自然..jQuery .on事件處理程序和ES2015箭頭函數

這裏是我的示例代碼：

$(".actionBtns").on('click', '.editButton', this.handlerEditBtnClick) //Would give 'this' the value of the button clicked 
 
$(".actionBtns").on('click', '.editButton',() => {this.handlerEditBtnClick()}) //Would give 'this' the value of the class

我不知道我應該重新寫在第一行代碼上面的使用方式ES2015。

在函數handlerEditBtnClick中，我需要'this'作爲類，但我也想訪問被單擊的按鈕。

我的嘗試（上面的代碼中的第二行）並沒有給我訪問被點擊的按鈕DOM元素 - 至少在我看來不能訪問它。

感謝，

盧克

編輯這是handlerEditBtnClick（）函數：

handlerEditBtnClicked() { 
 
    var $item = $(this); //This isn't re-written yet, so 'this' actually refers to the edit button that was clicked 
 
    this.editItem($item); //This is where I need 'this' to be the class 
 
}

你可以看到，我需要 '這個' 來是兩個不同的東西..我不完全確定如何從handlerEditBtnClick內this.editItem（）以外調用editItem函數;

請注意，名字只是通用名稱，以方便在$(".actionBtns").on('click', '.editButton',() => {this.handlerEditBtnClick()}) handlerEditBtnClick功能打字

來源

2016-01-01 Denno

我想重寫的原因是因爲我想'this'是該函數所在的類。我將用更多的代碼更新我的問題，以說明爲什麼我想要這樣做 – Denno

在diffarent環境中稱之爲（this指的是類），
因爲()=>{}相當於function(){}.bind(this)所以你可以做任何

$(".actionBtns").on('click', '.editButton',() => {this.handlerEditBtnClick()})

或

$(".actionBtns").on('click', '.editButton', this.handlerEditBtnClick.bind(this))

然後訪問被點擊，你可以隨時使用e.target
（或e.currentTarget根據您的需要）

function handlerEditBtnClick(e) { 
console.log(e.target); // button that was clicked 
}

來源

2016-01-01 12:26:50 Bek

啊事件目標！當然。感謝Bek！ – Denno

不用擔心@ user1560593 :) – Bek

Geez是我的名字..猜猜我應該弄清楚如何更新.. – Denno

按鈕你也能做到這樣（是的，在ES5語法）：

$('.element').click(function(){ 
    $(this)===$('.element') //true 
});

顯然這是因爲jQuery cann ot綁定選擇器在寫入「箭頭方式」時（在轉換爲ES6之後）發揮作用。

檢查我自己的一些具體情況，或只使用event.target。

來源

2017-05-04 13:25:34

jQuery .on事件處理程序和ES2015箭頭函數

回答

相關問題