jQuery on ("focus", [...]) Выполнение процесса несколько раз

Question

Я только что начал использовать $.on() для динамической таблицы для сбора персональных данных о пассажирах. Это типично, что вам нужно нажать кнопку добавления, чтобы добавить новую строку в конце таблицы для большего количества пассажиров.

Я должен проверить идентификатор ребенка (RUT), он отлично работает, но когда проверка не удалась, я показываю предупреждение, чтобы сообщить пользователю, что данные неверны, поэтому в первый раз он выглядит нормально, но если пользователь не работает опять же, он показывает 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

Это происходит потому, что вы привязываете обработчик события в другом обработчике событий. Каждый раз, когда элемент .rut равен focus ed, еще один обработчик события blur прикреплен к элементу. Удалите hanler blur событий из обработчика события focus и все будет хорошо:

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

    } 
});