$(()=>{ 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> el código anterior tiene dos líneas $(".box").bind('mouseenter.x mouseleave.y', (event) => ... & $(".box").unbind('mouseenter.x mouseleave.y'); que no funcionan cuando reemplazamos $(".box") con $(this) . Quiero usar esto . ¿Cuál es el uso adecuado de esto para que mi código se ejecute correctamente?