this in Jquery failing

Question

$(()=>{
    let count = 0;

    $(".box").bind('mouseenter.x mouseleave.y', (event) => {
        $(".box").text(7 - `${count}` + " attempts and event STOPS!").toggleClass("xob");

        ++count;

        if(count >= 8)
            $(".box").unbind('mouseenter.x mouseleave.y');
    });
});

    .box{
        width: 800px; height: 200px;
        background-color: black;
        color: white;
        font: 2em monospace;
    }

    .xob{
        width: 800px; height: 200px;
        background-color: darkred;
        color: yellow;
        font: 2em monospace;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">hover at this!</div>

above code has two lines $(".box").bind('mouseenter.x mouseleave.y', (event) =>... & $(".box").unbind('mouseenter.x mouseleave.y'); which fail to work when we replace $(".box") with $(this). I want to use this. What is proper usage of this so my code runs successfully.

1. Arrow functions do not change scope, so `this` will not refer to the element that raised the event. Use the `target` property of the event passed to the handler function as an argument. See the duplicate I marked for more information on this. 2. Do not use `bind()`/`unbind()`. It was deprecated a ***long*** time ago. Use `on()` and `off()` instead. — Rory McCrossan, May 11 '22 at 13:46
Or use `function(event)` instead of `(event) => `. This is a use-case for a classic function. — jabaa, May 11 '22 at 13:47

this in Jquery failing

0 Answers0