动态添加is-invalid类的元素绑定jQuery keyup事件无效问题

问题原因 #

直接用$(".is-invalid").on('keyup', ...)绑定事件时，jQuery只会给页面初始化时就存在且带有.is-invalid类的元素绑定事件。而你是点击保存按钮后才动态给输入框添加.is-invalid类，这类元素并没有被绑定到之前定义的keyup事件上，所以输入时不会触发移除类的操作。

解决方案：使用事件委托 #

把事件绑定到一个静态存在的父元素（比如表单容器、body或document）上，通过选择器过滤触发事件的目标元素。这样不管元素是一开始就有类还是后来动态添加的，只要匹配.is-invalid选择器，事件就能生效。

示例代码 #

// 推荐绑定到表单，范围更精准
$("form").on('keyup', ".is-invalid", function() {
  $(this).removeClass("is-invalid");
});

// 若不确定父元素，也可绑定到document
// $(document).on('keyup', ".is-invalid", function() {
//   $(this).removeClass("is-invalid");
// });

逻辑说明 #

当输入框被动态添加.is-invalid类后，用户在输入框按键时，事件会冒泡到绑定的父元素，父元素会检查触发事件的元素是否匹配.is-invalid选择器，匹配则执行移除类的操作，这样就能正常生效。

内容的提问来源于stack exchange，提问作者Osama Al-Theebah