Jquery EasyUI中treegrid的中右鍵菜單和一般按鈕同時綁定事件時的怪異事件

做個項目使用jquery  easyui來做前端，也許是對此不是很熟悉，總是發現一些不可理解的事件。

主要源代碼如下：

<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、從源代碼可以看到，點擊“新增子節點”與點擊上面的“+”形圖標綁定的事件是相同的，但是出來的結果卻不一樣。

        $("#access_lb_new,#access_menu_new").click(function(){
            access_new();
        });

 5、查看發送系統執行的日志可以發現，第一次右鍵菜單的時候發送了多次獲得子節點的請求。

6、將兩個按鈕的事件綁定代碼分開寫，如下，重復操作以上動作，發現結果就完全正常了，沒有出現多個請求與子節點重復的情況。

        $("#access_lb_new").click(function(){
            access_new();
        });
        $("#access_menu_new").click(function(){
            access_new();
        });

7、同時，我嘗試了以第4點同樣的方式綁定兩個一般按鈕（非右鍵彈出菜單），也不會出現子節點重復出現的問題。由此可見,只有在treegrid使用右鍵彈出菜單，並且將右鍵菜單的事件同時綁定在另外一個按鈕上的時候，才會出現這種奇怪的現象。