jQuery Typeahead下拉项添加Href属性/点击事件问题求助

我明白你现在卡在哪了——Typeahead能正常拉出后台数据，但动态生成的<li>元素既加不上href属性，连click事件都绑不上。这其实是动态DOM元素绑定的常见坑，或者是你没用到Typeahead本身提供的回调能力，下面给你两种靠谱的解决思路：

方法一：用Typeahead内置的onSelect回调（最推荐） #

Typeahead本身就提供了选择项时的回调函数，完全不用手动去折腾DOM元素，直接在初始化配置里加onSelect就能搞定跳转或其他逻辑：

修改你的JavaScript代码就行：

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('<?= site_url("search/get_data") ?>', { query: query }, function (data) {
            // 假设返回的data是包含id、name等字段的数组
            return process(data);
        });
    },
    // 重点：添加选择回调
    onSelect: function (selectedItem) {
        // 这里的selectedItem就是你选中的那条数据，直接跳转就行
        window.location.href = '/your-target-path/' + selectedItem.id;
        // 要是想打开新窗口就用：window.open('/your-target-path/' + selectedItem.id, '_blank');
    }
});

这种方式最稳妥，是Typeahead原生支持的逻辑，完全不会有动态元素绑定失效的问题。

方法二：用事件委托绑定点击事件（适合一定要手动操作DOM的场景） #

如果你非得给<li>绑点击事件，因为这些元素是动态生成的，直接用$('li').click()肯定没用，得用事件委托把事件绑到父容器上：

先看你生成的HTML结构，找到下拉列表的父容器（比如Typeahead默认的tt-dropdown-menu），然后写代码：

// 把事件绑到父容器（或者更上层的document也可以，尽量找近的父元素）
$(document).on('click', '.tt-dropdown-menu li', function() {
    // 先拿到当前项的标识，比如你可以在生成li时加data-id属性
    var itemId = $(this).data('id');
    // 然后跳转
    window.location.href = '/your-target-path/' + itemId;
});

另外说一句：<li>本身是不支持href属性的，要是想让它看起来像链接，应该把<li>里的内容改成<a>标签，这可以用Typeahead的template配置实现：

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('<?= site_url("search/get_data") ?>', { query: query }, function (data) {
            // 把数据转成带URL的格式
            var formattedData = data.map(function(item) {
                return {
                    id: item.id,
                    name: item.name,
                    url: '/your-target-path/' + item.id
                };
            });
            return process(formattedData);
        });
    },
    // 自定义模板，把每个选项改成带href的a标签
    template: function(item) {
        return '<li><a href="' + item.url + '">' + item.name + '</a></li>';
    },
    // 要是用模板的话，记得引入Hogan.js（Typeahead默认的模板引擎）
    engine: Hogan
});

如果不想引入额外的模板引擎，直接用字符串拼接也能凑合用，就是代码没那么规整。

最后给你排查小提示 #

你可以检查下：

1. 后端CI Model返回的数据是不是包含了跳转需要的字段（比如id、slug）；
2. 前端生成的HTML结构里，下拉项是不是纯文本，有没有预留自定义属性的空间；
3. 优先用方法一的onSelect，毕竟是官方设计的逻辑，稳定性比手动绑事件好太多。

内容的提问来源于stack exchange，提问作者uneeb meer