Javascript JSON实时搜索。结果项onclick未触发的事件。为什么？

下面的代码一直工作到我希望用户单击链接列表项的位置。出于某种原因，我的点击事件处理程序根本无法捕获它

我错过了什么？真的很沮丧

我有以下结构的json文件data.json

我搜索键值对的这个json，并创建一个ul，其中包含链接，作为匹配结果

ul内部的每个结果都是与a href的链接

我已经动态地生成了这些

我想捕获此点击，对其执行e.preventDefault（），然后获取href属性值和windows.location。这可以防止在我请求其他页面时在新窗口中打开本机html5 safari ap

这是我的建议

[
{
“姓名”：“莎拉·康纳”，
“客户id”：“111”
},
{
“姓名”：“约翰·特拉沃尔塔”，
“客户id”：“222”
},
{
“姓名”：“汤姆·克鲁斯”，
“客户id”：“333”
}
]

搜寻
$（“.collection item”）。在（“click”，“a”，函数（e）{
log（'触发了测试单击事件'）；
});
$（文档）.ready（函数（）{
$（“#搜索”）.keyup（函数（）{
//搜索输入
var searchField=$（'#search'）.val（）；
//如果至少键入了一个字符。。。
如果（searchField.length>0）{
//A.空结果div。
$（“#结果”）.empty（）；
//“i”=忽略大小写
var regex=new RegExp（searchField，'i'）；
变量输出='”；
//从PHP获取JSON。。。
$.getJSON（'data.json'，函数（数据）{
//循环遍历键/值对的JSON数组。。。
$。每个（数据、函数（键、值）{
//返回一个数字，表示第一次出现的位置
//指定搜索值的值，如果未找到匹配项，则为-1
//这里我们搜索并比较-1条件。
//示例…val.name.search（regex）与“未找到”不同。。。
//如果我们的名字或客户id匹配。。。。
if（（val.name.search（regex）！=-1））{
输出+=''；
console.log（'match！'）；
}
//如果结束
});
//结束每一个
输出+=''；
//闭合ul标签
//输出到结果部门
$（'#results'）.html（输出）；
}); 
}否则{
//清除成绩组
$（“#结果”）.empty（）；
}
});
});

您试图在元素存在之前应用事件侦听器

在迭代结果之后，将事件侦听器分配移动到，并将元素添加到dom中

另外，我认为您的事件分配语法不正确。您需要选择

$（..）

部分中的元素（即在此处包括

a

），然后应用处理程序。您似乎在该部分中有一个额外的不正确参数（“a”），我已将其移动到选择部分

即：

---

已修改

添加了

onclick=\“js\u重定向（此事件）\

---

因为它是在用户在搜索框中键入时生成的或不是。我如何将事件添加到我生成的结果中？Console仍然没有显示绑定到它的事件。太疯狂了。它确实显示了不相关的keyUp。添加调试以测试选择是否正在查找元素：

Console.log（“items:，$”（“a.collection-item”））

如果我在a标记上添加一个onclick，会怎么样？我建议的方法有效。这是一个演示。我怀疑你还有其他问题，这通常被认为是不好的做法。当然它有效（并且一直有效），但现代方法出于很多原因避开了这一点。主要是因为你的函数（js_重定向）必须在全局命名空间中。好的。我的搜索框似乎在选项卡组件中。我想知道这是否是影响它的原因。我很快会尝试一下。你应该问清楚定义你的问题的问题-即在你的代码中隔离问题。这将消除关于是什么导致意外错误的任何混淆在这个过程中，你和你自己经常会解决问题。

$('#results').html(output);

...

$( "a.collection-item" ).on("click", function(e) {
console.log('test click event fired.');

});

// If we got a match on name OR client_id....
if ((val.name.search(regex) != -1)) {

output += '<a href=\"#!\" class=\"collection-item\" onclick=\"js_redirect(this, event)\">';
output += val.name;
output += '<span class=\"badge\">' + val.client_id + '</span>';
output += '</a>';
console.log('match!');

}
// end if

function js_redirect(el, event) {

// Prevent the actual link redirect
event.preventDefault();

// Got to href location via Script instead.
window.location = el.href;

}