js的onclick事件无法触发

今天帮别人写个小东西（搜索时智能提示），最后发现添加上的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>

解决方案 »

  1.   

    加有啊！ var itemText = document.createElement("a");
                itemText.setAttribute("class", "schoolItem");
                itemText.innerHTML = data[i];
                itemText.setAttribute("title", data[i + 1]);
                item.appendChild(itemText);
      

  2.   

    AJAX返回的data是有效值吗，楼主有没有测试过
      

  3.   

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

  4.   

    你代码中点击li时不是alert()出了一个对话框吗，有没有对话框弹出来啊？
      

  5.   

    document.createElement()出来后如果追加进去了 。
    这么写 应该是没问题的 。
      

  6.   

    你看看把这一句改成alert("text")有没有反应，如果有反映，那应该是你为它添加的子元素有问题，如果不能正常弹出，那么应该是语句的逻辑有问题。。
      

  7.   

    是啊，我也在想，我在其他页面只试了这几句代码，是没问题的，click事件也能正常触发，但就在这儿，不行，我想是不是跟我代码上的其他元素冲突了，但就是找不到是什么元素！
      

  8.   

    item.onclick = function () { alert(this.childNodes[0].title); }
    建议你写成字符串形式，写成属性这种方式很容易失效，我也遇到过
      

  9.   

    <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