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);
}

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