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

    } 
});