日期:2014-05-16  浏览次数:20769 次

做搜索提示时jquery中focusout和click事件冲突问题
代码片段

<script>
j("ol li").click(function(){
j("#dataInput").val(j(this).find("span:first").html());
j("#sug").hide();
});

j("#dataInput").focusout(function(){
j("#sug").hide();
});
</script>
<input id="dataInput" type="text" />
<div id="sug">
<ol>
<li>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
</li>
</ol>
</div>

当搜索提示层显示 用户点击其中一个li 就把第一个span中的内容放入input域中 但点击时由于触发了focusout事件 使得click事件失败 span内容无法填入input中,应该怎样解决

------解决方案--------------------
这是我刚刚测试的全部代码,是可以填入值的,楼主,有兴趣可以试试看,大家多交流下,相信会有更好的方法。
#sug{width:200px;height:140px;background:#fff; display:none;}
#sug ol,li{margin:0;padding:0;}
#sug li{background:#f7f7f7;height:22px;border-bottom:1px solid #ccc;width:200px;}

$(function() {
        $("ol li").click(function() {
            $("#dataInput").val($(this).find("span:first").text());
            $("#sug").hide();
        });
        $("#dataInput").keypress(function() {
            $("#sug").slideDown();
        }).blur(function() {
            $("#sug").slideUp();
        });
    })