我想用普通的Javascript而不是jQuery做到这一点。我有一个脚本,该脚本会基于keyup事件进行ajax调用并返回更改的项目列表。因此,在搜索框中输入3个字符(“ eth”)后,我们可能会有一个这样的列表:
ethereum
ethereum-classic
ethos
ethlend
etherparty
etheroll
ethereum-blue
ethorse
ethbits
etheriya
ethereumcash
ethbet
ethereum-gold
ethereum-dark
ethereum-movie-venture
ethgas
etherdelta-token
ethereum-lite
现在,我想通过单击从列表中选择一项。到目前为止的代码是:
function loadDoc() {
var string = document.getElementById("searchbox").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").style.display = "";
document.getElementById("demo").innerHTML = "";
obj = JSON.parse(this.responseText);
for (i = 0; i < obj.length; i++) {
document.getElementById("demo").innerHTML += "<div>" + obj[i].id + "</div>";
}
document.getElementById("demo").addEventListener("click", "div", function(){
var item = document.getElementById('demo').innerHTML;
//var item = this.getElementById("demo")[0].innerHTML;
alert(item);
});
}
};
xhttp.open("POST", "/search?string=" + string, true);
xhttp.send();
除行外一切正常
document.getElementById("demo").addEventListener("click", "div", function(){
var item = document.getElementById('demo').innerHTML;
//var item = this.getElementById("demo")[0].innerHTML;
我已经尝试了多种变体,获得的最好成绩是捕获整个列表的click事件,我希望被单击的项成为返回的唯一项。用Javascript实现此目的的正确方法是什么?
谢谢!
您定义addEventListener
错误,回调函数必须是第二个参数。然后,您可以使用event.target
访问被单击的项目。这是一个示例代码:
<div id="demo">demo</div>
<script>
//assume you get all items in this obj
var obj = [{id:"ethereum"}, {id:"ethereum-classic"}, {id:"ethos"}, {id:"ethlend"}, {id:"etherparty"}] //...
document.getElementById("demo").innerHTML = "";
for (i = 0; i < obj.length; i++) {
document.getElementById("demo").innerHTML += "<div>" + obj[i].id + "</div>";
}
document.getElementById("demo").addEventListener("click", function(e){
var item = e.target; //event.target
alert(item.innerText); //get text of selected item (eg "ethereum")
});
</script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句