如何在动态创建的元素上触发按键事件

Question

我有一个 firstName 和一个 lastName 输入，我正在隐藏它们并将其替换为单个 fullName 输入框。然后我在动态创建的输入上使用 JqueryUI 自动完成，它工作正常。当我尝试为此编写单元测试并动态添加一些输入并触发 'keydown' 事件时，带有自动完成结果的框没有显示（我想断言我在我的测试中得到了想要的结果). 如果我在输入中手动输入 "s"，结果显示得很好。我有一个 JSFiddle 显示我的问题。

HTML:

<input id="firstName">
<input id="lastName">

JQuery:

// add the single input
$('#firstName').before('<input id="fullName">');
// remove the original first and last name fields
$('#firstName, #lastName').hide();
// call autocomplete on the dynamically created input
$("#fullName").autocomplete({
  source: ["ActionScript", "AppleScript", "ASP", "Basic", "ColdFusion", "Haskell", "JavsScript", "Lisp", "Scala", "Scheme"]
});

// ** start unit test **

// auto populate the dynamic input
$('#fullName').val('sc');
// force a keypress to show the autocomplete options
$('#fullName').trigger('keypress');

Answer 1

替换

$('#fullName').trigger('keypress');

和

$('#fullName').autocomplete('search');

更新

OP 不希望使用小部件的 API，而 keydown 和 keypress 等常见事件取决于 event.keyCode，而 trigger 则不存在=] 被调用。

有趣的是，input 事件不会禁止按键。所以这可能是 OP 单元测试的理想选择。

$('#fullName').trigger('input')

如何在动态创建的元素上触发按键事件

How to fire a keypress event on a dynamically created element

jquery

jquery-ui-autocomplete