【原创】Jquery Dom事件函数应用实例

最近做项目的时候利用DIV模拟下拉框，基本思路如下：
1， 触发元素设置为input，当然也可以是其他类型元素
2， 给触发源绑定click事件，依次执行创建DIV、然后利用Ajax动态填充DIV内容、再利用Ajax的回调函数给填充的内容增加Hover事件，以增强用户体验、绑定click事件将值填充至触发源元素思路有了，代码实现起来也很容易，主要是用Jquery的选择器，那是相当的强大。大约1小时，界面+功能+样式 基本完成，还是看代码吧
HTML部分：具有“drop”样式的元素为模拟下拉<tr>
          <td>用户名</td>
          <td><input type="text" id="tbUserName" tip="a-z组成，不可重复，同名的在全拼后加字母a 以此类推" alert="用户名不能为空，且必须是英文" /></td>
        </tr>
        <tr>
          <td>工 号</td>
          <td><input type="text" id="tbCode" tip="5位数字序号，例如00201" alert="工号不能为空，且只能是位数字" reqtype="num" /></td>
        </tr>
        <tr>
          <td>部 门</td>
          <td><input class="drop" type="text" id="tbDept" tip="" readonly="readonly" drop="dept" alert="部门不能为空" /></td>
        </tr>
        <tr>
          <td>考勤方法</td>
          <td><input class="drop" type="text" id="tbKqType" tip="" readonly="readonly" drop="kqtype" alert="考勤方法不能为空" /></td>
        </tr>
JS部分：function bindDrop(){
      $(".drop").click(function(){
        //声明源this对象
        var eventSource = $(this);
        var div = document.createElement("div");
        document.body.appendChild(div);
        $(div).addClass("popdiv");
        var l = $(this).offset().left;
        var t = $(this).offset().top;
        div.style.top = t + $(this).height() + 5 + 2;
        div.style.left = l;
        div.style.width = $(this).width() + 3;
        
        var drop = $(this).attr("drop");
        
        $(div).html("<img src='../images/ajax_blue.gif' />");
        $.post("rpc/ajax_regForm.aspx?drop="+drop,function(data){
          $(div).html(data);
          //增加hover样式
          
          $(div).find("div").hover(
            function(){
              $(this).addClass("popdivHover");
            },
            function(){
              $(this).removeClass("popdivHover");
            }
          );
          
          
          //绑定onclick
          $(div).find("div").click(function(){
            $(eventSource).val($(this).html());
            $(eventSource).attr("vid",$(this).attr("vid"));
            $(div).remove();
                        
          });
          //
          
        });
      });
      
}
Ajax后台部分的代码就不贴了，主要就是根据触发源的不同，查询不同的数据，并拼接成HTML，再输出给客户端。
代码基本一气呵成，开始测试吧
截个图看看效果：
（带小三角的是模拟下拉）怎么样，效果还行吧？本人CSS不好，界面做成这样很不容易了，呵呵
OK，模拟下拉基本完成，测试似乎也没啥问题。
不过，事情永远都不是那么顺利的，被我抓到一个BUG
就是点击下拉后，出现DIV，如果不做任何选择，单击其他位置DIV收不回去，必须选择一个项，DIV才能关闭。
似乎也不是什么大的问题，但从使用习惯上来讲这个设计是不人性化的。
本着用户就是上帝的态度，我决定，改！应该很简单的事情嘛
思路如下：
不选择的时候，单击其他区域收回DIV，在Document或父容器下加一个click事件，把弹出DIV删除不就可以了吗？我决定在动态加载DIV后，每次给document元素绑定一个删除事件，这里用到了Jquery的one方法，每次调用每次加载，应该是没有问题的吧？修改了下之前的代码：
在Ajax回调函数里加了如下动态绑定click事件的代码：
$(document).one("click",removePopdiv);
function removePopdiv(){
      $(".popdiv").remove();
}解释一下：one是Jquery Event类型函数之一，看名称就知道，这个方法是在匹配元素上绑定一个事件，一旦事件执行一次后便卸载事件。
接着测试：
先弹出DIV，再点击其他位置，OK，DIV收回去了（被删除了）。我想，这么容易就成功了。
可是，当我再点击此模拟下拉并选择了一个项时，DIV死活不出来了！
我仔细考虑了一下，应该是卸载事件没有被执行造成，恩，应该加一个unbind方法，再次修改代码如下：function bindDrop(){
      $(".drop").click(function(){
        //声明源this对象
        var eventSource = $(this);
        var div = document.createElement("div");
        document.body.appendChild(div);
        $(div).addClass("popdiv");
        var l = $(this).offset().left;
        var t = $(this).offset().top;
        div.style.top = t + $(this).height() + 5 + 2;
        div.style.left = l;
        div.style.width = $(this).width() + 3;
        
        var drop = $(this).attr("drop");
        
        $(div).html("<img src='../images/ajax_blue.gif' />");
        $.post("rpc/ajax_regForm.aspx?drop="+drop,function(data){
          $(div).html(data);
          //增加hover样式
          
          $(div).find("div").hover(
            function(){
              $(this).addClass("popdivHover");
            },
            function(){
              $(this).removeClass("popdivHover");
            }
          );
          
          
          //绑定onclick
          $(div).find("div").click(function(){
            $(eventSource).val($(this).html());
            $(eventSource).attr("vid",$(this).attr("vid"));
            $(div).remove();
            //此处加上卸载事件方法
            $("#regForm").unbind("click",removePopdiv);
             
          });
          //
          $("#regForm").one("click",removePopdiv);
        });
      });
      
    }
    function removePopdiv(){
      $(".popdiv").remove();
}
OK，测试通过！