Tengo un form y al hacer clic en una input , estoy agregando clases al div envuelto de esa input .
Para hacer esto, utilicé el blur y ejecuté mi función al click . Sin embargo, en algunos casos (muy raramente) funcionará (y agregará la clase). Pero la mayoría de las veces, no realiza la acción de click (porque no aparece console.log("click") ).
Mi opinión es que tal vez el navegador esté en conflicto entre el blur y el click . También intenté cambiar click to focus , pero sigo teniendo los mismos resultados.
Manifestación:
$(function() { var input_field = $("form .input-wrapper input"); $("form .input-wrapper").addClass("noData"); function checkInputHasValue() { $(input_field).on('blur', function(e) { var value = $(this).val(); if (value) { $(this).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("hasData"); } else { $(this).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("noData"); } }); } $(input_field).click(function() { checkInputHasValue(); console.log("click"); }); });He hecho algunas modificaciones en tu código.
function checkInputHasValue(e) { var value = $(e).val() if (value) { $(e).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("hasData"); } else { $(e).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("noData"); } } $(document).on('blur',input_field, function(e) { checkInputHasValue($(this)); }); $(document).on("click",input_field,function() { checkInputHasValue($(this)); console.log("click"); });Para evitar conflictos entre eventos, separaría los eventos y su verificación de valor. En su código, el evento de desenfoque puede ocurrir varias veces.
El siguiente código parece estar bien, por lo que puedo decir ^^
$(function() { var input_field = $("form .input-wrapper input"); $("form .input-wrapper").addClass("noData"); function checkInputHasValue(el) { let target = $(el).closest(".input-wrapper"); var value = $(el).val(); $(target).removeClass("hasData noData"); $(target).addClass(value.length == 0 ? "noData" : "hasData"); console.log("hasData ?", $(target).hasClass("hasData")); } $(input_field).on("click", function() { console.log("click"); checkInputHasValue(this); }); $(input_field).on("blur", function() { checkInputHasValue(this); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <div class="input-wrapper"> <input> </div> </form>