使用jQuery（Twitter Bootstrap + typehead）在动态元素上绑定(keyup)事件。

Question

我猜你们中的一些人看到这个标题时可能会皱起眉头？我相信每次人们都会问这个问题，但是我还没有看到我的特定问题，所以我在尝试！将事件绑定到动态创建的元素是我的弱点，我就是无法理解它...

所以好吧，我正在使用Twitter Bootstrap和typehead()插件。我使用这个技巧来使它与远程数据源配合工作。此时，一切正常。我点击表单中标记为它的文本输入，脚本会加载外部来源并出现下拉菜单。但是我有动态元素创建，你已经想到了，它们就是不起作用。我正在探索live()方法，但是看着脚本如何被触发，我不确定如何实现它。

$('#anInputField').typeahead().on('keyup', function(ev){
 // stuff happens
});

每次键盘松开，脚本就会触发一个jSON请求，检查它的内容，并将结果返回给typehead()函数，该函数完成自动补全的部分工作。那么我怎么告诉jQuery去查看在初始绑定之后创建的#aDropdownID元素呢？我尝试了使用live()，但由于on()替代了它...我很无助！任何帮助都将不胜感激！

- Jean-Philippe Murray

Answer 1

on()要进行代理，您必须在静态元素上调用它，确保该元素始终存在，然后将动态元素传递给它：

$('#static-parent').on('keyup', '#aDropdownID', function(ev){
 // stuff happens
});

如果您没有静态的父元素，那么您可以始终使用 body。

- elclanrs

---

所以 <p> 或者 <div> 可以有 "keyup" 事件吗？ - Jean-Philippe Murray

keyup事件发生在#aDropdownID上。如果没有HTML，我无法确定那是什么。 - elclanrs

不行，不会起作用。目前，使用非动态元素，它的工作方式如下：$('input[id^="autocomplete"]').typeahead().on('keyup', function(ev){ //doing things }); ... 如果我尝试用 #idOne 替换选择器，即使是非动态的也会出问题。我猜 typehead（或者keyup）只在输入元素上触发？ - Jean-Philippe Murray

好的，我搜索了一下，似乎“keyup”事件只会触发可聚焦元素（主要是输入框（和其他表单元素）和A元素？）。看起来除非我能将东西包装在A中，否则无法实现？ - Jean-Philippe Murray

如果您没有静态的父元素，那么您可以始终使用document。 - toesslab

Answer 2

这对我很有效：

$(document).on('keyup', '#YourInputFieldId', function () {
    //stuff happens
});

- Mark Ryan Orosa