如何使用ES6箭头函数从jQuery on（）事件获取元素？ [英] How to get the element from a jQuery on() event using an ES6 arrow function?

问题描述

在使用ES6的箭头函数之前，如果我想从jQuery on（）点击事件中获取元素，那么我可以这样做：

  $（document）.on（'click'，'.inserted-el'，function（event）{
 console.log （this）; 
}）; 
  

但是，使用箭头功能，我无法再访问 code>这样。如何获得被点击的元素？

解决方案

您可以使用 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）;}）;  

  ！ - 提供`snippet`对象，请参见http://meta.stackexchange.com/a/242144/134069  - >< script src =http://tjcrowder.github.io/simple-snippets-控制台/ 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>  

p>

Previous to using ES6 arrow functions, if I wanted to get the element from a jQuery on() click event then I could do something like this:

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

However, with the arrow function, I can no longer access this in that way. How do I get hold of the element that was clicked on?

解决方案

You can use event.currentTarget to refer to the target element of the handler

$(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>

这篇关于如何使用ES6箭头函数从jQuery on（）事件获取元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！