如何使用ES6箭头函数从jQuery on()事件中获取元素？

Question

在使用ES6箭头函数之前,如果我想从jQuery on()单击事件中获取元素,那么我可以执行以下操作:

$(document).on('click', '.inserted-el', function(event) {
    console.log(this);
});

但是,使用箭头功能,我无法再this以这种方式访问.如何获取所点击的元素？

Answer 1

您可以使用event.currentTarget来引用处理程序的目标元素

$(document).on('click', '.inserted-el', function(event) {
  snippet.log('old -> ' + this.innerHTML + ':' + event.currentTarget.innerHTML);
});
$(document).on('click', '.inserted-el', (event) => {
  snippet.log('new -> ' + this.innerHTML + ':' + event.currentTarget.innerHTML);
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="inserted-el">1</button>
<button class="inserted-el">2</button>