Jquery EasyUI中treegrid的中右鍵菜單和一般按鈕同時綁定事件時的怪異事件
InChatter系統開源聊天模塊前奏曲
最近在研究WCF，又因為工作中的項目需要，要為現有的系統增加一個聊天模塊以及系統消息提醒等，因此就使用WCF做服務器端開發了一個簡單的系統。
開發最初學習了東邪孤獨大哥的《傳說的WCF系列》，文章寫的很好，有興趣的朋友也可以參考寫，文章深入淺出，非常不錯，堅持看完，相信在WCF方面可以入個門了，而且聽說孤獨大哥也來到的博客園呢~
上面絕非廣告，完全是真心的感謝，沒有孤獨大哥的文章，開發之初可能真的不會像現在這么順利，現在軟件的聊天模塊已經可以正常運行和交流了。
所以呢，我也想趁着這次機會：
- 把自己學習到的知識，總結一下拿出來跟大家分享下
- 就一步完善自己的聊天模塊，希望能夠做成一個開源的通用模塊
一直都想把自己所學習到的知識跟大家分享，只是我這個人文筆確實不怎么樣，而且還比較懶，更不想把自己的時間全部放在電腦面前，每次洗頭都會看着掉發一把一把的，不過誰讓我們喜歡這一行，更發自內心的喜歡呢，所以堅持是我們唯一的選擇了。
從今往后，我會不斷的督促自己，把學習到的知識經驗跟大家一起分享，一起進步。
首先呢，我將把自己設計以及開發WCF開源聊天模塊的過程以及過程中所涉及到的知識都寫出來，希望大家與我一起見證這個開源項目的成大和壯大，同時我也在考慮為這個項目尋找Java、Andirod等語言方面的朋友，一起開發完成，但目前由於剛剛開始，很多地方都不太完備，大家也看不到任何東西呢，所以這個就推遲。我將首先開發WCF+WPF版本的模塊。期待這個模塊能夠盡快跟大家見面。
這篇文章也算是開篇小記吧，亂七八糟的一大推，希望不會讓各位覺得時間浪費了。
做個項目使用jquery easyui來做前端，也許是對此不是很熟悉，總是發現一些不可理解的事件。
主要源代碼如下：
View Code
<script type="text/javascript">
$(function(){
var access_editingId; //當前正在編輯的
var access_lastChildName;
var access_addclick=0; //點擊了添加
$('#access_tg').treegrid({
//右鍵
onContextMenu:function(e,row){
e.preventDefault(); //該方法將通知 Web 瀏覽器不要執行與事件關聯的默認動作（如果存在這樣的動作）
$('#access_tg').treegrid('select',row.id);
$('#access_menu').menu('show',{
left: e.pageX,
top: e.pageY
});
}
});
$("#access_lb_new,#access_menu_new").click(function(){
access_new();
});
function access_new(){
var tt=$('#access_tg');
var row = tt.treegrid('getSelected'); //獲取選中的標簽項
tt.treegrid('reload',row.id); //reload為異步操作，如果直接讀取子節點會無內容
}
});
</script>
<div class="container">
<div id="access_menu" class="easyui-menu" style="width:100px;">
<div id='access_menu_edit'>編輯本節點</div>
<div id='access_menu_del'>刪除本條目</div>
<div id='access_menu_refresh'>刷新節點</div>
<div id='access_menu_new'>新增子節點</div>
</div>
<table id="access_tg" title="權限分配" class="easyui-treegrid" style="height:500px"
url="/Admin/Access/treegrid" toolbar="#access_toolbar"
rownumbers="true" idField="id" treeField="description">
<thead>
<tr>
<th field="id" width="40">ID</th>
<th field="description" width="200" editor='text'>描述</th>
<th field="name" width="50">名稱</th>
<th field="action" width="200" editor='text'>動作</th>
<th field="role" width="200" editor='text'>角色</th>
<th field="state" width="200" editor='text'>狀態</th>
<th field="parentid" width="200" editor='text'>父層</th>
</tr>
</thead>
</table>
<div style="height:5px"></div>
<div id="access_toolbar" >
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" id="access_lb_new">
</div>
</div>
顯示界面如下：
1、點擊幾次權限分配按鈕，可以打開“權限分配”頁面，然后點擊關閉，再次打開。
2、在第一條上右鍵菜單，點擊“新增子節點”，然后樹形結構變成了如下圖，發現樹形結構的子節點重復出現了多次。
3、關閉權限分配按鈕，點擊上面的“+”形圖標，樹形結構展開，可以發現子節點完全是正常的。
4、從源代碼可以看到，點擊“新增子節點”與點擊上面的“+”形圖標綁定的事件是相同的，但是出來的結果卻不一樣。
View Code
$("#access_lb_new,#access_menu_new").click(function(){
access_new();
});
5、查看發送系統執行的日志可以發現，第一次右鍵菜單的時候發送了多次獲得子節點的請求。
6、將兩個按鈕的事件綁定代碼分開寫，如下，重復操作以上動作，發現結果就完全正常了，沒有出現多個請求與子節點重復的情況。
View Code
$("#access_lb_new").click(function(){
access_new();
});
$("#access_menu_new").click(function(){
access_new();
});
7、同時，我嘗試了以第4點同樣的方式綁定兩個一般按鈕（非右鍵彈出菜單），也不會出現子節點重復出現的問題。由此可見,只有在treegrid使用右鍵彈出菜單，並且將右鍵菜單的事件同時綁定在另外一個按鈕上的時候，才會出現這種奇怪的現象。
8、那到底為什么會出現這種事情呢？期待哪位大大為小弟解答一下。