jQuery [required="yes"]选择器绑定blur事件失效问题求助

我明白你的困惑——CSS能精准选中这些元素调整样式，可JS绑定blur事件就没反应，确实挺挠头的。核心原因通常不是选择器本身的问题，而是事件绑定的时机或者方式不对，下面给你分场景解决：

1. 元素是静态渲染的（页面加载时就存在） #

如果你的元素是页面初始化就有的，那大概率是你绑定事件的代码执行得太早了——DOM还没加载完成，脚本就跑了，自然选不到元素。

解决办法是把事件绑定代码放在DOM加载完成后执行：

// 等待DOM完全加载
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有required="yes"的元素
  const requiredInputs = document.querySelectorAll('[required="yes"]');
  
  // 逐个绑定blur事件
  requiredInputs.forEach(input => {
    input.addEventListener('blur', function() {
      // 这里写你的blur逻辑，比如校验输入
      console.log(`输入框 ${this.name} 失去焦点了`);
    });
  });
});

或者更简单的方式：把你的JS脚本放在<body>标签的末尾，这样脚本执行时DOM已经渲染完成。

2. 元素是动态生成的（比如通过AJAX、JS创建） #

如果这些[required="yes"]元素是后续动态添加到页面的，那直接用querySelectorAll绑定事件肯定不行——因为绑定的时候这些元素还不存在。这时候要用事件委托，把事件绑定到一个静态存在的父元素（比如document或者更近的容器），利用事件捕获/冒泡来监听动态元素的blur事件。

注意：blur事件本身不冒泡，但focusout事件是冒泡的，所以两种方案可选：

方案A：用focusout事件（冒泡，更直观） #

// 绑定到document，监听所有子元素的focusout事件
document.addEventListener('focusout', function(e) {
  // 判断触发事件的元素是不是我们要的目标
  if (e.target.matches('[required="yes"]')) {
    // 执行你的blur逻辑
    console.log(`动态输入框 ${e.target.name} 失去焦点了`);
  }
});

方案B：用blur事件的捕获模式 #

// 第三个参数设为true，开启事件捕获
document.addEventListener('blur', function(e) {
  if (e.target.matches('[required="yes"]')) {
    console.log(`动态输入框 ${e.target.name} 失去焦点了`);
  }
}, true);

为什么CSS生效但JS不生效？ #

CSS的属性选择器会自动匹配页面上所有符合条件的元素——不管是一开始就有的，还是后来动态生成的。但JS的addEventListener是直接绑定到当前存在的元素上的，后续新增的元素不会自动继承这个绑定，这就是核心差异。

这样应该就能解决你的问题，不用给元素加额外的required类，直接用你原来的属性选择器就行。

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