Jquery button arrow function

Question

 $("#btn").on("click",()=>{
  var el = $(this);
 el.parent().find("#lbl").html("a");
 });
 
  $("#btn1").on("click",function(){
  var el = $(this);
 el.parent().find("#lbl").html("a"); 
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvHeader">
<label id="lbl">Hello WOrld</label>
<button id="btn">
Button 1!
</button>
<button id="btn1">
Button 2!
</button>
</div>

I'm starting to learn an arrow function. I am wondering the two code above for button function don't work properly in an arrow function. But the other one is working properly. Did I do wrong?.

@jack why?. can you give a documentation URL so I can read?. — KiRa, Jul 24 '20 at 07:05
on [w3c](https://www.w3schools.com/Js/js_arrow_function.asp) — jack, Jul 24 '20 at 07:07
Because `this` inside your arrow function refers to window object and not to the button, take a look on [**this**](https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/) to learn more — Saadi Toumi Fouad, Jul 24 '20 at 07:09
@KiRa maybe you want to use the event object, take a look on my answer — Saadi Toumi Fouad, Jul 24 '20 at 07:32
@SaymoinSam It solve my problem. I thought that `$(this)` can be use. Sample above is just my example using `$(this)`, but thank you for effort — KiRa, Jul 24 '20 at 07:39
@jack That’s not W3C. That’s W3Schools. There’s better documentation on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). — Sebastian Simon, Jul 24 '20 at 07:47

score 1 · Answer 1 · answered Jul 24 '20 at 07:31

But if you want to use arrow functions in your jQuery event handlers you can use the event object inside your listener like this

$("#btn").on("click", e => $(e.target).parent().find("#lbl").html("a"));

$("#btn1").on("click", function() {
  $(this).parent().find("#lbl").html("a");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvHeader">
  <label id="lbl">Hello WOrld</label>
  <button id="btn">Button 1!</button>
  <button id="btn1">Button 2!</button>
</div>

score 0 · Answer 2 · answered Jul 24 '20 at 07:19

0

I have changed you code to achieve what you are trying to do: Demo

Also change your function to as below:

$("#btn").on("click",()=>{
  var el = document.getElementById("lbl");
  el.textContent = 'a';
 });

answered Jul 24 '20 at 07:19

Pritesh

337
1
10

1

if that was the case then it could be just `$("#btn").on("click", _=> $("#lbl").html("a"));` as he's using jQuery – Saadi Toumi Fouad Jul 24 '20 at 07:21
I just added to not change HTML rather only update text-content but you are also correct :) – Pritesh Jul 24 '20 at 07:24
If it was only for text content then `.html("a")` would be `.text("a")` but I saw the OP using `.html()` that's all – Saadi Toumi Fouad Jul 24 '20 at 07:25
Yep, still it is assumption of purpose from my end so no point discussing lot on it but still you are right that can also be option. – Pritesh Jul 24 '20 at 07:27

matteopratanamakmur · Answer 3 · 2020-07-24T07:46:32.240

Alternatively, you can use 「event.currentTarget」.
For example, below code works.

$("#btn").on("click", (event) => {
    var el = $(event.currentTarget);
    el.parent().find("#lbl").html("a");
});

<!DOCTYPE html>
<html>
<head>
    <title>test page</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="dvHeader">
        <label id="lbl">Hello World</label>
        <button id="btn">
            Button 1!
        </button>
        <button id="btn1">
            Button 2!
        </button>
    </div>
    <script>
        $("#btn").on("click", (event) => {
            var el = $(event.currentTarget);
            el.parent().find("#lbl").html("a");
        });

        $("#btn1").on("click", function(){
            var el = $(this);
            el.parent().find("#lbl").html("a"); 
        });
    </script>
</body>
</html>

Jquery button arrow function

3 Answers3