Cuando voy a la parte donde está el mouseenter, no se dispara la primera vez. Pero si lo dejo y vuelvo a la misma parte, entonces el mouseenter se dispara. He estado buscando desesperadamente una solución. La parte del código se ve así
if(target.hasClass("level1")) { console.log(target); target.mouseenter(function () { newThis.focus(event, target); timer = setTimeout(function () { newThis.focus(event, target); }, 200); }).mouseleave(function () { clearTimeout(timer); }); }Así que sí, el código funciona, pero no se activa la primera vez.
Eso es intencional: solo dispara al cruzar el límite al entrar.
¿El evento mouseover resuelve tu problema?
Está creando el controlador .mouseenter y .mouseleave dentro de un if . Entonces, una vez que se completa la declaración if, configura los controladores de entrada / salida del mouse. Esto significa que los eventos solo se activarán después de que se haya ejecutado el if. Por lo tanto, se requiere otro movimiento del mouse para activar el evento recién agregado.
Por lo general, creará los controladores al cargar la página y filtrar las llamadas inapropiadas más adelante.
Sin conocer más contexto, pruebe un concepto en el que no necesite el si.
Vea el ejemplo a continuación.
let timer; $('.level1') .mouseenter(function (event) { var newThis = $(this).find('input'); newThis.focus(); timer = setTimeout(function () { newThis.focus(); }, 200); }).mouseleave(function () { clearTimeout(timer); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <article> <section> <h1>Hello.</h1> <p>Article Text</p> </section> <section> <form> <div class="level1"> <input type="text" name="one" /> </div> <div class="level2"> <input type="text" name="two" /> </div> </form> </section> </article> </body> </html>