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" mce_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" mce_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，测试通过！