jquery操作appned到页面的代码的问题

<script type="text/javascript">
        $(function () {
            $("#mycmb").click(function (e) {
                var dd = $("<ul id='ulcmb'></ul>");
                dd.css("border-color", "blue");
                dd.css("border-style", "solid");
                dd.css("border-width", "1px");
                dd.css("position", "absolute");
                dd.css("left", $(this).offset().left);
                dd.css("top", $(this).offset().top + $(this).height());
                dd.css("margin", "0");
                dd.css("padding", "0");
                dd.width($("input", $(this)).width());                $("<li><font color='red'><i>山西</i></font></li>").appendTo(dd);
                $("<li><font color='red'><i>北京</i></font></li>").appendTo(dd);
                $("<li><font color='red'><i>上海</i></font></li>").appendTo(dd);
                $("<li><font color='red'><i>天津</i></font></li>").appendTo(dd);
                 
                $(this).parent().append(dd); 
                
            }) 
            $("#mycmb>input").focus(function () {
                $(this).blur();
            })        })
        
    </script>
 <div id='mycmb'>
        <input type='text' /><img src="images/heart.jpg" width='15px' height='20px'/>
     </div>我想在鼠标移到<li>上时变色并且点击某个li的话隐藏bb,这个怎么操作，求告知解惑

解决方案 »

  1.   

    $('li').live('click', function(){
    //...
    })动态添加的DOM 用live来绑定事件
      

  2.   

    而且楼主你的CSS简写下吧。。CSS支持传对象 {width:100px,height:100}
      

  3.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title></title>
        <style type="text/css">
    .hover{  background-color:Blue; }
    </style>
        <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#mycmb").click(function (e) {
                    var dd = $("<ul id='ulcmb'></ul>");
                    dd.css("border-color", "blue");
                    dd.css("border-style", "solid");
                    dd.css("border-width", "1px");
                    dd.css("position", "absolute");
                    dd.css("left", $(this).offset().left);
                    dd.css("top", $(this).offset().top + $(this).height());
                    dd.css("margin", "0");
                    dd.css("padding", "0");
                    dd.width($("input", $(this)).width());                $("<li><font color='red'><i>山西</i></font></li>").appendTo(dd);
                    $("<li><font color='red'><i>北京</i></font></li>").appendTo(dd);
                    $("<li><font color='red'><i>上海</i></font></li>").appendTo(dd);
                    $("<li><font color='red'><i>天津</i></font></li>").appendTo(dd);                $(this).parent().append(dd);
                    $("#ulcmb li").hover(
                        function () {
                            $(this).addClass("hover");
                        },
                        function () {
                            $(this).removeClass("hover");
                        }
                    );
                    $("ul li").click(
                        function () {
                            $("#ulcmb").hide();
                            $("#txt").val($(this).find("i").html());
                        }
                    );
                })
                $("#mycmb>input").focus(function () {
                    $(this).blur();
                })        })
      </script>
    </head>
    <body>
    <div id='mycmb'>
       <input type='text' id="txt" /><img src="images/heart.jpg" width='15px' height='20px'/>
       </div></body></html>
      

  4.   

    楼主不好意思有点点bug,每次点击输入框都会在页面上插入一个新的ulcmb，少了句话，把点击方法换成下面的
    $("#ulcmb li").click(
                        function () {
                            $("#ulcmb").hide();
                            $("#txt").val($(this).find("i").html());
                            $("#ulcmb").remove();
                                                }
                    );