嵌套输入框内容变更时移除父元素red类的实现问题

嘿，我来帮你搞定这个小问题！你的需求是当输入框内容变化时移除外层div的red类，但原来的代码没生效，大概率是事件触发时机或者DOM加载顺序的问题，下面给你几个靠谱的解决方案：

可能的原因分析 #

• change事件触发时机太滞后：number类型的输入框，change事件只有在输入框失去焦点（比如点击别处）或者按下回车时才会触发，如果你希望用户一输入内容就移除类，这个事件就不太合适。
• 代码没等到DOM加载完成就执行：如果你的jQuery代码写在页面头部，或者没有包裹在DOM就绪的回调里，此时输入框元素还没被渲染出来，事件绑定就会失效。
• 选择器虽可用但不够健壮：.red > input是直接子元素选择器，你的结构里确实符合，但用closest()方法定位父元素会更灵活，哪怕后续HTML结构微调也不会影响功能。

解决方案代码 #

方案1：用input事件实时监听输入（推荐） #

这个事件会在用户输入内容（包括键盘输入、粘贴、点击输入框的加减按钮）时立即触发，完美匹配“内容改变就移除类”的需求：

// 确保DOM加载完成后再绑定事件
$(document).ready(function() {
  $('.red input').on('input', function() {
    // 找到最近的带form-group类的父元素，移除red类
    $(this).closest('.form-group').removeClass('red');
  });
});

方案2：如果坚持用change事件（适合失去焦点时触发的场景） #

如果你只需要在用户输入完、离开输入框时移除类，那可以保留change事件，但同样要确保DOM就绪：

$(document).ready(function() {
  $('.red > input').on('change', function() {
    $(this).parent().removeClass('red');
  });
});

调试小技巧 #

如果还是没生效，可以在事件回调里加个日志，看看事件有没有被触发：

$(document).ready(function() {
  $('.red input').on('input', function() {
    console.log("输入事件触发啦！"); // 打开浏览器控制台看有没有这条日志
    $(this).closest('.form-group').removeClass('red');
  });
});

如果控制台没输出，那说明事件没绑定成功，检查一下：

• 有没有正确引入jQuery库？
• 代码是不是放在了$(document).ready()里面？
• 选择器有没有写错？

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