$(()=>{
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.