新插入ul中的＜li＞标签无法绑定点击事件

我做的是搜索框下，关联数据显示
下面是html基本结构。

 <input class="search" type="text" value="目的地：北京，上海，深圳" id="search">
<ul class="search-like" id="list-box">
</ul>

ul内没有li，通过模板引擎方法插入从后台接收到的数据到ul中；
在给li绑定事件过程中遇到了问题，在外部绑定事件会无效，因为li是后面动态生成的，也就是说在模板引入后才有li，所以要把绑定li的点击事件代码放入
下面为js代码。

//根据输入内容得到类似数据
var timer = null;
searchInp.oninput = function() {
//清除上次定时器
clearTimeout(timer);
clearTimeout(timer_banner)
//
timer_banner = setInterval(function() {
index++;
var translatex = -focus_offsetwidth * index;
//渐变切换
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
var key = this.value;
//去掉两边空格后长度为0，则隐藏列表
if (key.trim().length == 0) {
listBox.style.display = 'none';
//阻止程序向下执行
return;
}
//Ajax放入定时器函数中，防止无效内容触发事件，间隔一定时间
timer = setTimeout(function() {
ajax({
url: 'http://localhost:3000/getkey',
type: 'get',
data: {
key: key
},
//如果成功，拼接模板字符串，显示出ul
success: function(data) {
//console.log(data);
var html = template('tpl', {
result: data
});
// console.log(listBox);
listBox.innerHTML = html;
listBox.style.display = 'block';
// console.log(html);
//li点击绑定正确书写位置
console.log($("#list-box li"));
var list_li = document.querySelectorAll("#list-box li");
// console.log(list_li);
for (var i = 0; i < list_li.length; i++) {
// console.log(list_li[i]);
list_li[i].addEventListener("click", function() {
searchInp.value = this.innerHTML;
})
};
}
})
}, 1000)
}

但是在我的代码中依旧无法执行点击效果，点击li后控制台不会输出任何内容，但是我绑定鼠标移入事件就可以，最后我发现问题出在了我给搜索框绑定的失去焦点事件上，如下

searchInp.onblur = function() {
this.value = '目的地：北京，西安，重庆';
//问题是这句话，注释掉即可
// listBox.style.display = 'none';
};
$(searchInp).focus(function() {
$(this).val("");
});

鼠标点击li的时候搜索框会失去焦点，失去焦点后，存放内容的ul盒子变为none，所以里面的li也无法点击，绑定的点击事件就失效了

最后

以上就是迷人眼神为你收集整理的新插入ul中的＜li＞标签无法绑定点击事件的全部内容，希望文章能够帮你解决新插入ul中的＜li＞标签无法绑定点击事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。