JavaScript
js的onclick事件无法触发
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区今天帮别人写个小东西（搜索时智能提示），最后发现添加上的li无法触发click事件(FillData()方法)，其他的mouseover mouseout等，都可以，我想，可能是我哪儿的ID重名了，但就是找不到，拿出来，希望大家能帮我看看错在哪儿！先谢了！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#parent{position:relative;}
#ulPop{margin:0px;padding:0px;list-style-type:none;z-index:1;width:180px;display:none;border:1px solid #000;font-family:@微软雅黑;overflow:hidden;font-size:14px;}
#ulPop li{}
#ulPop li a{display:block;}
#ulPop li a:hover{background:#326bc5;color:#fff;}
.schoolItem{display:block;text-decoration:none;padding:0.2em 0.4em;line-height:15px;}
.itemOnSelected{background:#326bc5;color:#fff;line-height:24px;}
</style>
</head>
<body>
<div id="parent">
<input type="text" id="txtSuggest" />
<ul id="ulPop"></ul>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
var upKeyCode = 38, downKeyCode = 40, enterKeyCode = 13;
var xhr;
var input = $("txtSuggest");
input.onblur = function () { $("ulPop").style.display = "none"; }
input.options = $("ulPop").getElementsByTagName("li");
function CreateXMLHttpRequest() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
function GetDataByKey(key) {
var url = "Handler.ashx?keyword=" + escape(key);
xhr = CreateXMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readystate == 4) {
if (xhr.status == 200) {
var data = xhr.responseText.split(",");
if (data.length >= 1) FillData(data);
}
}
}
xhr.open("GET", url, true);
xhr.send(null);
}
input.selectedIndex = 0;
input.onkeyup = function (e) {
e = e == undefined ? window.event : e;
switch (e.keyCode) {
case upKeyCode:
clearSytleOnSelected(this);
this.selectedIndex--;
if (this.selectedIndex < 0)
this.selectedIndex = this.options.length - 1;
setSytleOnSelected(this);
break;
case downKeyCode:
clearSytleOnSelected(this);
this.selectedIndex++;
if (this.selectedIndex >= this.options.length) {
this.selectedIndex = 0;
}
setSytleOnSelected(this);
break;
case enterKeyCode:
input.value = this.options[this.selectedIndex].childNodes[0].innerHTML;
$("ulPop").style.display = "none";
break;
default:
if (this.value.length >= 1)
GetDataByKey(this.value);
else $("ulPop").style.display = "none";
break;
}
}
function $(id) {
return document.getElementById(id);
}
function FillData(data) {
$("ulPop").innerHTML = "";
for (var i = 0; i < data.length; i = i + 2) {
var item = document.createElement("li");
item.onclick = function () { alert(this.childNodes[0].title); }
var itemText = document.createElement("a");
itemText.setAttribute("class", "schoolItem");
itemText.innerHTML = data[i];
itemText.setAttribute("title", data[i + 1]);
item.appendChild(itemText);
$("ulPop").appendChild(item);
}
$("ulPop").style.display = "block";
}
function clearSytleOnSelected(sender) {
if (sender.selectedIndex >= 0) {
sender.options[sender.selectedIndex].className = "";
}
}
function setSytleOnSelected(sender) {
sender.options[sender.selectedIndex].className = "itemOnSelected";
}
</script>
...全文
相关推荐
IE8的JavaScript点击事件(onclick)不兼容的解决方法
主要介绍了IE8的JavaScript点击事件(onclick)不兼容的解决方法,大家参考使用吧
FireFox与IE 下js兼容触发click事件的代码
FireFox与IE 下js兼容触发click事件 ,对于需要兼容这两者的朋友，就需要参考下下面的代码了
js自定义事件及事件交互原理概述(一)
在JS中事件是JS与浏览器交互的主要途径,本文主要介绍下最简单的自定义事件，不过还有很多缺陷，感兴趣的朋友可以了解下，或许对你学习自定义事件有所帮助
javascript 中设置[removed].href跳转无效问题解决办法
主要介绍了javascript 中设置[removed].href跳转无效问题解决办法的相关资料,需要的朋友可以参考下
js的一个事件路由
传统的js事件不支持多事件处理器绑定，尽管DOM level2提供了addEventListener方法，但是有些浏览器还不支持（IE），写了个支持多绑定的eventRouter，用起来很方便。
