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