Twitter Bootstrap Typeahead无法添加到动态创建的元素中。

Question

有没有办法将Twitter Bootstrap的typeahead函数转换为$("body").on()函数？ 如果元素在页面加载时存在，则以下代码可以正常工作。

$("#job_title").typeahead({
    source: searchFunction,        
    onselect: function(obj) {            
    }
});

但如果我动态添加带有id="job_title"的文本输入框，则上述函数将不起作用。是否有解决方法？

- Adam Levitt

---

在有人误以为那是问题之前，修复丢失的引号。 - Esailija

在我将新的输入元素添加到页面后，我绝对会立即重新调用这个函数。 - Adam Levitt

你需要添加创建元素的代码，并在其上调用.typeahead。因为http://jsfiddle.net/9DxLZ/1/可以正常工作。 - Esailija

被接受的答案是实现这个的唯一方法吗？虽然Esailija的fiddle可以工作，但对于已经创建的类似元素可能不是理想的选择。例如，使用Esailija的fiddle示例，如果该输入框已经被创建，那么另一个输入框会动态地被创建吗？这意味着.typeahead必须绑定两次，一次在文档准备好时，另一次在元素动态创建时，以覆盖生成的两种类型的输入框。除了被接受的答案之外，是否有一种方法可以只绑定一次.typeahead？ - Josh

我不太确定，因为回答问题的人是我自己。如果可能的话，请尝试联系Esailija。 - Adam Levitt

Answer 1

这个解决方案不需要额外的javascript。来自https://stackoverflow.com/a/15094730

$("#element-that-will-contain-typeaheads").on("DOMNodeInserted", function () {
    $(this).find(".typeahead").typeahead();
});

- Dustin L.

Answer 2

我下载了jquery.livequery.js以获得我想要的行为：

$("#job_title").livequery("create", function() {
    $(this).typeahead({
        source: searchFunction,        
        onselect: function(obj) {            
        }
    });
});

- Adam Levitt

---

你是否曾经找到一种不使用补充JavaScript的替代方法来完成这个任务？ - Josh

最近我因为浏览器兼容性问题，将Bootstrap实现替换为jQuery-ui实现。 - Adam Levitt

你遇到了哪些浏览器兼容性问题？ - Josh

IE8 对我是一个问题，我认为。它对很多东西都有困难，但是我们需要为我们的客户保持 IE8 兼容性。 - Adam Levitt

Answer 3

var fx = {
    "init":function() {
        $("#id_of_an_element").typeahead({
            minLength:2,
            delay:1 ...
        })
    },
    "method2":function(){
        some content;
    }
}

每当包含typeahead的元素被加载到DOM中（例如通过AJAX成功调用fx.init（）），都会触发此操作。

- Jan