jQuery on（“focus”，[...]）多次执行过程

Question

我刚开始使用$.on()来收集乘客个人数据的动态表格。 这是典型的，你必须点击一个添加按钮，在表格的最后添加一个新的行，以获得更多的乘客。

我必须验证孩子ID（RUT）它的效果很好，但是当验证失败时，我会显示警告，告诉用户数据不正确，因此第一次看起来不错，但是如果用户失败再次，它显示2个警报，然后3,4，...等等，因为用户继续奋斗输入无效的ID。

如果有人可以帮忙，我会很高兴，纠正这种行为，实现只显示一个警报失败。单击“确定”五次是非常烦人的，并且可能是项目落后的原因。

这是我使用的代码：

$("#tabdata").on("focus",".rut",function(){ 
    $(this).css("border","1px solid lightSkyBlue"); 
    }); 
$("#tabdata").on("focus",".rut",function(){ 
    $(this).blur(function(e){ 
     var rut = $(this).val(); 
     var rutarr = rut.split("-"); 
     if (rutarr.length==1 || dv(rutarr[0].toLowerCase())!=rutarr[1].toLowerCase()){ 
     //ver si el rut esta mal escrito, sin guion split no separara nada. 
     $(this).css("border","1px solid Red"); 
     alert("EPA!!!, no tan rapido, el Rut ingresado no es valido, por favor revisa bien."); 

     }else{ 
     $(this).css("border","1px solid Green"); 

     } 
    }); 
}); 

，这里是您需要的页面，看看这部史诗失败矿。

Answer 1

发生这种情况是因为您正在绑定另一个事件处理程序中的事件处理程序。每当一个.rut元素为focus时，另一个blur事件处理程序被附加到该元素。从focus事件处理程序删除blur事件hanler和一切都会好起来：

$("#tabdata").on("focus",".rut",function(){ 
    $(this).css("border","1px solid lightSkyBlue"); 
}).on("blur",".rut", function(e){ 
    var rut = $(this).val(), 
     rutarr = rut.split("-"); 
    if (rutarr.length == 1 || dv(rutarr[0].toLowerCase()) != rutarr[1].toLowerCase()){ 
    //ver si el rut esta mal escrito, sin guion split no separara nada. 
     $(this).css("border","1px solid Red"); 
     alert("EPA!!!, no tan rapido, el Rut ingresado no es valido, por favor revisa bien."); 

    } else { 
     $(this).css("border","1px solid Green"); 

    } 
});