jQuery事件綁定很常見，相信大家經常會用到click、focus、blur等事件，但是如果對控件的某個事件綁定多個方法會是怎樣的結果呢，覆寫、累加、或其他效果？今天我就來驗證一下這個疑問并說說如何解綁。
一、jQuery事件多次綁定
<head>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//第二次綁定
//使用 click() 方法添加的事件處理程式僅适用于目前元素
$("#btnAdd").click(function () {
alert("bind click1");
});
//第三次綁定
//使用 on() 方法添加的事件處理程式适用于目前及未來的元素（比如由腳本建立的新元素）
$("#btnAdd").on("click", function () {
alert("bind click2");
});
//第四次綁定
$("#btnAdd").bind("click", function () {
alert("bind click3");
});
});
function add1() {
alert("add1()");
}
</script>
</head>
<body>
<h2>UserController->Index</h2>
<!--第一次綁定-->
<input type="button" id="btnAdd" name="btnAdd" value="Add" onclick="add1()" />
</body>
驗證結果：對控件的某個事件進行多次綁定效果會疊加，截圖如下：
二、jQuery事件解綁
既然能綁定事件，那應該也能對事件解綁，下面展示解綁的方法：
<head>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnAdd").click(function () {
alert("bind click1");
});
$("#btnAdd").on("click", add2);
$("#btnAdd").bind("click", add3);
});
function add1() {
alert("add1()");
}
function add2() {
alert("bind click2");
}
function add3() {
alert("bind click3");
}
function cancelBind() {
//不指定方法名則解綁click事件對應的所有方法，标簽内onclick設定的方法仍會執行
//$("#btnAdd").off("click");
//$("#btnAdd").unbind("click");
//解綁click事件對應的add2方法
$("#btnAdd").off("click", add2);
//$("#btnAdd").unbind("click", add3);
}
</script>
</head>
<body>
<h2>UserController->CancelBind</h2>
<input type="button" id="btnAdd" name="btnAdd" value="Add" onclick="add1()" />
<input type="button" id="btnCancelBind" name="btnCancelBind" value="CancelBind" onclick="cancelBind()" />
</body>
![用jQuery實作一個簡易的聊天框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)