对不起标题 - 这是我的第四次尝试......
我正在运行一个完美的typeahead.js
,但我希望在用户从其创建的下拉列表中选择一个项目并且它无法正常工作时再运行一个命令
$('.typeahead').typeahead(
{ hint: false,
highlight: true,
minLength: 3
},
{
displayKey: 'name',
templates: {
suggestion: Handlebars.compile("<div><strong>{{name}}</strong> <div class='suggestion'>{{m}} > {{n}}</div></div>")
},
source: list.ttAdapter(),
limit: 9}).on('typeahead:selected', function (obj, datum) {
a = datum.name;
b = datum.m;
c = datum.n;
/* when the user selects an item, this function runs, setting */
/* variables a, b, and c. I also want to .addClass and removeClass, */
/* but the code doesn't run. */
$('#search').addClass('fa-unhappy');
$('#search').removeClass('fa-happy');
});
我可以在一个单独的函数中运行它 - 函数运行时ID search
确实存在,我不确定它为什么不添加和删除类我问它。
如果由于某种原因它会产生影响,那么这就是HTML:
<i id="search" class="fa fa-2x fa-check-square uCheck fa-unhappy"></i>
和CSS ...
.fa-happy {
color: green;
opacity: 0.8;
transition: color 1.5s ease;
}
如果我这样做的话,有趣的是:
console.log($('#search').width());
进入函数它返回正确的值,所以我知道它可以找到id为search
的元素。
好的......让事情变得更奇怪,我可以在vanilla js中完成,但不是jquery:
var d = document.getElementById("search");
d.className = "fa fa-2x fa-check-square uCheck fa-happy";
这对我没有意义,因为typeahead.js
需要使用jQuery库,(我确定它已在页面中加载了......)