JQuery取消和註冊對象Click事件同時防止多播委託

頁面表單:

<div>
        @{
            UserInfo userInfo = ViewBag.UserInfo as UserInfo;
            List<UserAction> list = ViewBag.UserAction as List<UserAction>;             //數據查詢到內存中,提高性能
        }
        <input type="hidden" id="UserId" value="@userInfo.UserId"/>
        <table border="1">
            <thead>
                <th>權限名稱</th>
                <th>設置</th>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.ActionTitle</td>
                        <td>
                            <input type="radio" name="@item.ActionId"
                                @if (list.Where(ua=>(ua.ActionId==item.ActionId)&&(ua.IsAllow==true)).Count()>0)
                                    {
                                        @(" checked='checked'");
                                    }
                                   value="1"/>允許  
                            

                            <input type="radio" name="@item.ActionId" 
                                @if (list.Where(ua=>(ua.ActionId==item.ActionId)&&(ua.IsAllow==false)).Count()>0)
                                    {
                                        @(" checked='checked'");
                                    }
                                   value="-1"/>拒絕  
                            

                            <input type="radio" name="@item.ActionId"
                                @if (list.Where(ua=>(ua.ActionId==item.ActionId)).Count()==0)
                                    {
                                        @(" checked='checked'");
                                    }
                                   value="0"/>取消
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

頁面預覽:

如上圖所示,

要使上圖中的radio點擊的同時觸發點擊事件,同時取消該點擊對象的點擊事件,又讓另外兩個兄弟節點對象註冊點擊事件

因爲JS不支持事件多播委託,但是JQuery支持,所以在取消註冊當前點擊對象的Click事件的同時也要對其他兩個兄弟節點radio取消Click事件後重新綁定。

請忽略與服務端交互的代碼!

JS代碼:

$(function(){
	$(':radio').bind('Click',Click1);//給所有radio綁定單擊事件
	//$(':radio:not(:checked)').bind('Click',Click1);//僅給未選擇的radio綁定單擊事件,也能解決問題
});
function Click1(){
	alert('1');
	
	@*//收集數據
	var uid = $('#userId').val();
	var aid = $(this).attr('name');
	var allow = $(this).val();
	
	//發送異步請求
	$.post('@Url.Action("SetAction","UserInfo1")',{
		uid:uid,
		aid:aid,
		allow:allow
		},function(msg){
			if(msg!="ok"){
				alert('分配否決失敗,請稍後再試');
			}
	});*@
	
	//處理綁定事件,防止用戶點擊多次已選中的單選按鈕,從而進行多次請求。
	$(this).unbind('click').siblings().unbind('click').bind('click',Click1);
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章