关于jquery多个bind事件的处理

Question

关于jquery多个bind事件的处理
现在绑定了2个jquery的验证。
一个是点击  另一个 是失去焦点触发。
$('#name').bind('blur', function(){//失去焦点触发
if($('#name').val()!=null||!($('#name').val().euqals(''))){
  var url = '${ctx}/ajax/ajax!checkName.action';
  var data= "name=" + $('#name').val();
$.ajax({
url:url,
data:data,
type:'POST',
success:function(data){
$('#my').html(data);
}
});
}
 $("#sumb").bind('click',function(){//点击验证 
 //$('#name').unbind();
 var url = '${ctx}/ajax/ajax!organExist.action';
 var data= {"provinceId":$('#province').val(),"cityId":$('#city').val(),"countyId":$('#county').val()};
 $.ajax({
 url:url,
data:data,
 type:'POST',
 success:function(data){
 alert(data);
}
 });
});
但是 我进入页面之后 先进第一个bind  失去焦点 判断 起作用了 。然后 点击恩扭 触发第2个 bind  就 会弹出2次alert 
同时第一个 bind的验证失效。小弟初学jquery 求大神 帮忙解答下 谢谢了

Answer 1

jsp 部分代码 
//名字失去焦点
<tr bgcolor="#FFFFFF">
<td class="form_key" width="10%"><font color="red">*</font>名称</td>
<td class="form_value"><input type="text" id="name" name="name"
size="40" value="${name}"
<%if (request.getAttribute("name") != null) {%> disabled="disabled"
<%}%> /> <label class="error" id="my"><font color="red">
</font></label></td>
</tr>//点击sumbit 触发事件
<tr bgcolor="#FFFFFF">
<td class="form_key">&nbsp;</td>
<td height="25"><input type="submit" class="button_mouseout"
id="sumb" onmouseout="this.className='button_mouseout'"
onmouseover="this.className='button_mouseover'" value="保存" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Answer 2

你点击sumb按钮时，对name输入框来说就是blur状态了。你若是就这么一个name需要验证的，那只保留后面的按钮事件即可，当然，成功提交后，还是要再服务器端再次验证其有效性

Answer 3

是不是因为嵌套的原因，把两个bind分离了试看哦

Answer 4

click事件也触发了blur. 要用preventDefault阻止继续触发          $('#name').bind('blur', function(e){//失去焦点触发
                if($('#name').val()!=null||!($('#name').val().euqals(''))){
                     var url = '${ctx}/ajax/ajax!checkName.action';
                     var data= "name=" + $('#name').val();
                    $.ajax({
                        url:url,
                        data:data,
                        type:'POST',
                        success:function(data){
                            $('#my').html(data);
                        }
                    });
e.preventDefault();
                });            
                 $("#sumb").bind('click',function(e){//点击验证 
                     //$('#name').unbind();
                     var url = '${ctx}/ajax/ajax!organExist.action';
                     var data= {"provinceId":$('#province').val(),"cityId":$('#city').val(),"countyId":$('#county').val()};
                     $.ajax({
                         url:url,
                        data:data,
                         type:'POST',
                         success:function(data){
                         alert(data);
                        }
                     });
e.preventDefault();
                });

Answer 5

您的意思是 把 name这个blur事件放在 点击事件的后面？ 然后点击sumbit时候 在执行这个验证？

Answer 6

不是这个意思。简单点说吧。你现在的问题无非是name的验证结果还没返回就执行了整体的提交事件。那你将name的ajax请求由异步改为同步。就可以避免你这个问题了一般有blur这种需求的大多是想验证唯一性的，那你哪怕是前台验证通过，提交到后台后还是要再次做有效性验证的。PS：这种使用blur事件完成唯一性验证，其实最主要的目的是为了用户体验，而不是要靠它完成最终验证