Javascript 在引入数据集后添加HTML元素

在中，我试图添加一个选项，该选项在用户开始键入后显示在下拉列表的底部。目前，我正在使用“onOpened”触发在初始化“tt下拉菜单”元素后添加一些HTML

.on('typeahead:opened', onOpened)
  function onOpened($e) {
    $('.tt-dropdown-menu').html( "<a href="">Add Option</a>" );
}

.on（'typeahead:opened'，onOpened）
开启的功能（$e）{
$（'.tt下拉菜单'）.html（“”）；
}

问题在于，正如预期的那样，当下拉列表初始化时添加jQuery HTML，然后当用户开始键入带有自动完成结果的新数据集元素时，会在该jQuery HTML的下方添加jQuery HTML，因此jQuery HTML永远不会出现在下拉列表的底部。您也不能将jQuery HTML附加到数据集，因为在初始化下拉列表时，该元素不存在

.on('typeahead:opened', onOpened)
  function onOpened($e) {
    $('.tt-dropdown-menu').html( "<a href="">Add Option</a>" );
}

---

有没有更简单的方法？其他自定义事件似乎不包括此场景。

如果您只有一个

数据集

，您可以像我一样：向数据集添加

页脚

，并将其作为DOM元素添加，而不是普通HTML字符串。然后，您可以随意更改它（如您希望更改任何事件），您的更改将反映在下拉列表中

例如：

$('#myinput').typeahead({
    // rest of your regular stuff, like 'name', 'remote', etc.
    footer: $('#dropdown-footer'),
});

。。。其中

下拉式页脚

是dom中某个地方的

div的ID。然后，您可以执行以下操作：

$('#dropdown-footer').html('Hello')

很好的答案是Nitzen，尽管现在有一个问题，就是当没有选择自动完成结果时，页脚会保持在那里，因为当数据集移动时，页脚会消失。无需为每个事件设置不同的功能。看起来太复杂了。@DanChristian:谢谢。事实上，我在自己的解决方案中做了一些“丑陋”的事情来克服这个问题。我添加了一个
filter
函数，如果没有匹配查询的术语，该函数将执行两件事：（1）返回一个单一的伪条目。（2） 在#输入上添加“无结果”CSS类。我的CSS规则使单个tt建议（如果是#input.no-results-class的子级）不显示。如果有答案，
过滤器将删除CSS类。这样，即使没有结果，我仍然会得到一个不可见的“虚拟”结果，并显示我的页脚。该死，真难看！但这应该能解决我的问题！谢谢我已经将它作为GIT上的一个问题添加到Typeahead中，希望能很快得到一个更优雅的解决方案。感谢这在我的情况下不起作用，可能是因为我们的建议有多个部分，但我找到了另一种方法，请参阅中的我的答案