我有一个带有远程数据源的 jQuery UI 自动完成文本字段。自动完成的select
事件做了三件事:
- 使用从自动完成列表中选择的值更新文本字段的值
- 进行 AJAX 调用以将更多数据加载到页面中
- 将焦点移动到另一个文本字段(在上一步中创建)
文本字段还有一个change
事件,它会删除上面第 2 步中加载的数据并触发自动完成的search
事件。
这在 IE 中完美运行(使用版本 9 和 10 进行了测试),但在 Firefox 中却不行。当我从自动完成列表中进行选择时,永远不会显示额外的数据(尽管分析网络流量表明正在进行 AJAX 调用)并且search
触发了自动完成的事件。在上述步骤 3 之后,我设法将问题追溯到 Firefox 触发文本字段的change
事件,显然是因为我在文本字段中输入了一些内容以触发自动完成列表,尽管文本字段后来以编程方式更新。
快速示例: http: //jsfiddle.net/2umrJ/1
(为简洁起见,该示例仅使用keyup
文本字段上的事件。)
IE10 中的输出:
input1.focus() 触发
input1.blur() 触发
input2.focus() 触发
Firefox 20 中的输出:
input1.focus() 触发
input1.change() 触发
input1.blur() 触发
input2.focus() 触发
可以看出,Firefox 会触发该change
事件,而 IE 则不会。现在我知道默认情况下(即没有任何额外代码)该change
事件仅在手动更改值时触发,但是当手动和以编程方式更改值而字段在两者之间失去焦点时,正确的行为是什么?
另外,对于我的特殊情况,更重要的是,如果 Firefox 的行为是正确的(或至少不是不正确的),那么防止它的最佳方法是什么?在我从自动完成列表中选择某些内容后,我不希望在change
以编程方式更改焦点时触发事件。