包含blur逻辑时form表单input的onclick点击事件不触发问题咨询

问题根因 #

你当前的代码存在两个核心逻辑错误，和blur与click的执行顺序无关：

• checkInputHasValue 函数的作用是给输入框绑定blur失焦监听器，而非当场执行输入值校验。你把该函数放在click事件回调中，相当于每次点击才给输入框绑定失焦事件，第一次点击时失焦逻辑还未生效，自然看不到类名切换效果，同时多次点击会重复绑定同一个监听器，造成内存冗余。
• 你需要的点击输入框时切换外层div类名的逻辑，完全没有写在click回调中，自然不会生效。

修复方案 #

把事件绑定和校验逻辑拆分：初始化时直接绑定好blur失焦校验，同时在focus（比click更符合输入框交互场景）事件中单独写点击/聚焦时的类名切换逻辑。

修正后代码 #

$(function() {
  // 缓存选择器
  var $inputWrapper = $("form .input-wrapper");
  var $inputField = $inputWrapper.find("input");

  // 初始化添加无数据类
  $inputWrapper.addClass("noData");

  // 失焦校验逻辑 初始化直接绑定 不需要嵌套在其他事件中
  $inputField.on('blur', function() {
    var $wrapper = $(this).closest(".input-wrapper");
    if ($(this).val()) {
      $wrapper.removeClass("noData").addClass("hasData");
    } else {
      $wrapper.removeClass("hasData").addClass("noData");
    }
  });

  // 聚焦时的类名切换逻辑 按需调整你要加的类名即可
  $inputField.on('focus', function() {
    $(this).closest(".input-wrapper").addClass("active"); // 这里替换成你需要添加的类名
    console.log("input focused");
  });
});

如果按上述修改后focus事件仍无打印，可以排查以下两点：

• 输入框是否是页面加载完成后动态生成的，如果是需要改用事件委托绑定：$(document).on('focus', 'form .input-wrapper input', function() { ... })
• 检查是否有其他脚本给input元素绑定了stopPropagation或者preventDefault阻止了事件触发

内容的提问来源于stack exchange，提问作者Freddy