AngularJS中ng-if内textarea的jQuery keyup事件失效问题

核心原因：DOM动态渲染与事件绑定时机不匹配 #

你的jQuery事件绑定代码是在页面初始加载阶段执行的：

$('textarea').on('keyup', function (e) {
    const elem = document.getElementById(this.id)
    ...
});

此时：

• 普通textarea在页面初始化时就已存在于DOM中，jQuery能正常选中并绑定事件，所以触发正常。
• 被ng-if控制的textarea，因为初始vm.showElement为false，AngularJS不会将其渲染到DOM里，jQuery选择器$('textarea')根本找不到这个元素，自然无法完成事件绑定。
• 对于ng-show控制的textarea，虽然它始终存在于DOM中（只是通过CSS隐藏），但如果你的绑定代码执行时，该元素还未被AngularJS渲染完成（比如依赖异步数据加载后才初始化），同样会出现选择器无法命中、事件绑定失败的情况。

补充：ng-if与ng-show的DOM处理差异 #

• ng-if是直接添加/移除DOM元素：当vm.showElement变为true时，AngularJS才会动态创建该textarea的DOM节点，但此时你的事件绑定代码早已执行完毕，不会自动为新创建的元素绑定事件。
• ng-show是CSS控制显示隐藏：元素自始至终存在于DOM，但如果绑定时机早于元素渲染完成，同样会出现绑定失效的问题。

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