jQuery 在 ("focus",[...]) 上进行多次处理

Question

我刚刚开始使用 $.on() 作为动态表来收集乘客个人数据。这是典型的情况，您必须点击添加按钮才能在表格末尾添加新行以容纳更多乘客。

我必须验证子ID(RUT)，它效果很好，但是当验证失败时，我会显示一个警报，告诉用户数据不正确，所以，第一次看起来没问题，但如果用户再次失败，当用户继续努力输入无效 ID 时，它会显示 2 个警报，然后是 3,4，...，依此类推。

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

这是我使用的代码:

    $("#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

发生这种情况是因为您在另一个事件处理程序中绑定(bind)了一个事件处理程序。每次 .rut 元素获得 focus 时，都会将另一个 blur 事件处理程序附加到该元素。从 focus 事件处理程序中删除 blur 事件处理程序，一切都会好起来的:

$("#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");

    }
});