文本框focus/blur事件绑定后无法触发的原因排查

我来帮你一步步排查这个问题～结合你给出的代码和现象，大概率是以下几种情况之一：

1. 文本框是动态生成的DOM元素 #

你的render函数在页面就绪时执行，但如果#textBoxId这个文本框是在render执行之后才被动态插入到页面中的（比如通过模板渲染、异步加载后生成），直接用.focus()或.bind('blur')绑定事件就会失效——这类方法只能绑定到当前已经存在于DOM树中的元素上。

而按钮的click事件能正常工作，大概率是因为按钮在render执行时已经存在于页面中了。

解决办法：使用事件委托 #

把事件绑定到一个已经存在的父元素（比如更接近的容器，或者document），利用事件冒泡机制来捕获动态元素的事件：

// 替换原来的focus绑定代码
$(document).on('focus', '#textBoxId', function() {
    console.log( "Handler for .focus() called." );
});

// blur事件同理修改
$(document).on('blur', '#textBoxId', function() {
    console.log("IN blur call");
});

注意：尽量选择最接近目标元素的、已存在的父元素作为事件委托的载体，比直接绑定到document性能更好。

2. 元素ID重复或选择器错误 #

先检查页面中是否有多个元素使用了textBoxId这个ID（浏览器里ID必须唯一），或者是不是拼写错误（比如大小写、字符遗漏）。

你可以打开开发者工具（F12），在控制台输入：

$('#textBoxId')

如果返回空数组，说明选择器找不到元素；如果返回多个元素，说明ID重复了——这两种情况都会导致事件绑定失效。

3. 其他代码干扰了焦点事件 #

有没有其他脚本在操作这个文本框？比如调用了event.preventDefault()、event.stopPropagation()阻止了焦点事件的传播，或者文本框被设置了autofocus属性导致焦点被抢占？

你可以在控制台手动触发焦点事件测试：

$('#textBoxId').focus()

如果手动触发能输出日志，说明页面交互时的焦点触发被其他代码干扰了，需要排查相关逻辑。

另外补充一点：如果你的jQuery版本较新，.bind()方法已经被官方推荐用.on()替代了，虽然按钮的click能生效，但统一使用.on()会更规范哦。

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