js的onclick事件无法触发

KeepMoving 2011-06-20 03:56:09
今天帮别人写个小东西（搜索时智能提示），最后发现添加上的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>
...全文
3169 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
KeepMoving 2011-06-20
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 kk3k2005 的回复:]

HTML code
<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……
[/Quote]哦！楼上的，真细心，真谢谢您！受教了！结帖，给分！
KK3K2005 2011-06-20
  • 打赏
  • 举报
 回复 
<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; border:solid 1px red; width:100%;}

        #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");



	var nowclick=false;		//当前是否在点击li

    

	//input.onblur = function () { $("ulPop").style.display = "none"; }

	

	input.onblur = function () { 

		var nowclick=false;		//清空点击状态

		setTimeout(function(){

			if(!nowclick){

				//alert(nowclick);

				$("ulPop").style.display = "none"; 

			}

		},300);

	}

	input.onfocus=function(){

		if (this.value.length >= 1){

                  GetDataByKey(this.value);

		}

	}





    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 a=[1,2,3,4,5,6];

		FillData(a);

		return;





        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.onmousedown=function(){

				nowclick=true;

			}

            item.onclick = function () { 

				input.value=this.childNodes[0].title;

				nowclick=false;

				$("ulPop").style.display = "none"; 

			}





			

            var itemText = document.createElement("a");

            itemText.setAttribute("class", "schoolItem");

			itemText.setAttribute("href", "javascript:;");

            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>


input.onblur = function () { $("ulPop").style.display = "none"; }
li.click前先执行了INPUT.BLUR所以你永远click不到li
ziyouren521125 2011-06-20
  • 打赏
  • 举报
 回复
还真不好找，建议删减法找找看问题在那
chendong_j 2011-06-20
  • 打赏
  • 举报
 回复
item.onclick = function () { alert(this.childNodes[0].title); }
建议你写成字符串形式，写成属性这种方式很容易失效，我也遇到过
KeepMoving 2011-06-20
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 zell419 的回复:]

引用 8 楼 weiyanli20080 的回复:

引用 6 楼 zell419 的回复:

item.onclick = function () { alert(this.childNodes[0].title); }
就这句没反应 ？
对的！就这一句没反应！

document.createElement()出来后如果追加进去了 。
这么写 应该是没问题的 。
[/Quote]是啊，我也在想，我在其他页面只试了这几句代码，是没问题的，click事件也能正常触发，但就在这儿，不行，我想是不是跟我代码上的其他元素冲突了，但就是找不到是什么元素！
IcyFox 2011-06-20
  • 打赏
  • 举报
 回复
你看看把这一句改成alert("text")有没有反应，如果有反映，那应该是你为它添加的子元素有问题，如果不能正常弹出，那么应该是语句的逻辑有问题。。
zell419 2011-06-20
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 weiyanli20080 的回复:]

引用 6 楼 zell419 的回复:

item.onclick = function () { alert(this.childNodes[0].title); }
就这句没反应 ？
对的！就这一句没反应！
[/Quote]
document.createElement()出来后如果追加进去了 。
这么写 应该是没问题的 。
KeepMoving 2011-06-20
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 huli870715 的回复:]

你代码中点击li时不是alert()出了一个对话框吗，有没有对话框弹出来啊？
[/Quote]就是没有，我才纳闷！有的话，就没这个问题了！
KeepMoving 2011-06-20
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 zell419 的回复:]

item.onclick = function () { alert(this.childNodes[0].title); }
就这句没反应 ？
[/Quote]对的！就这一句没反应！
IcyFox 2011-06-20
  • 打赏
  • 举报
 回复
你代码中点击li时不是alert()出了一个对话框吗，有没有对话框弹出来啊？
zell419 2011-06-20
  • 打赏
  • 举报
 回复
item.onclick = function () { alert(this.childNodes[0].title); }
就这句没反应 ？
KeepMoving 2011-06-20
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 huli870715 的回复:]

AJAX返回的data是有效值吗，楼主有没有测试过
[/Quote]数据没问题，要实现的效果都可以正常的出来，就点击时要提交数据，这个有问题！
IcyFox 2011-06-20
  • 打赏
  • 举报
 回复
AJAX返回的data是有效值吗，楼主有没有测试过
KeepMoving 2011-06-20
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 alexandertech 的回复:]

里面加个<a></a>撒
[/Quote]加有啊！


 var itemText = document.createElement("a");

            itemText.setAttribute("class", "schoolItem");

            itemText.innerHTML = data[i];

            itemText.setAttribute("title", data[i + 1]);

            item.appendChild(itemText);
飞跃颠峰 2011-06-20
  • 打赏
  • 举报
 回复
里面加个<a></a>撒
KeepMoving 2011-06-20
  • 打赏
  • 举报
 回复
自己先顶下！希望大家帮我打出！
javascript 动态改变onclick事件触发函数代码
javascript 动态改变onclick事件触发函数代码，需要的朋友可以参考下。
js加载等待效果，原理点击后创建层，onclick事件触发
js加载等待效果，原理点击后创建层，onclick事件触发
JavaScript onclick事件使用方法详解
onclick是一个事件，当事件被触发时就会执行处理，onclick是一个处理鼠标点击的事件。本篇文章就给大家分享关于JavaScript中onclick事件的用法。 我们首先来看一下onclick事件的语法 以下是如何使用onclick事件编写。 使用document.getElementById（）在文档中指定id元素，并使用function(){}处理单击该元素时发生的事件。 document.getElementById("button").onclick = function() { // 设置在此处单击#button时要发生的事件 }; 我们来看具体的示例 以下是使用oncl
js触发asp.net的Button的Onclick事件应用
在asp.net引入事件驱动之后，在一个页面上很容易解决多个按钮触发不同事件的问题，避免了在asp中需要多个form或者通过js脚本来控制的麻烦。 asp.net带来便利的同时，也带来一个问题。在实际应用中一个页面存在多个按钮的情况并不多。用户习惯于在输入框输入内容之后，直接按回车就提交表单了。由于asp.net采用的是事件驱动模式，所以默认用户按回车并没有触发按钮的onclick事件。用户按回车也不是没有提交表单，通过httpwath可以看到，实际上页面表单是提交到了form下的action页面，只不过没有触发onclick事件而已。 在asp.net事件驱动模式下面，要实现通过回车来触发事
js获取事件源及触发该事件的对象
某Html元素有onclick方法：onclick=’return myfunction(event)’ 代码如下: function myfunction(event) { event = event ? event : window.event; var obj = event.srcElement ? event.srcElement : event.target; //这时obj就是触发事件的对象，可以使用它的各个属性 //还可以将obj转换成jquery对象，方便选用其他元素 var $obj = $(obj); alert($obj.parent().attr(“href”));
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章