如何使在克隆的投入

Question

我有這個ID驗證這個領域的驗證工作，我只需要知道我可以做驗證和KeyDown和KEYUP功能上克隆投入工作。也插入數據結轉到重複的字段。

JS fiddle- http://www.jsfiddle.net/dawidvdh/xRh9v/

繼承人的JS：

$(document).ready(function() { 
    idAmount = [0,1,2,3,4,5,6,7,8,9,10,12,13]; 
    var idinc =1; 
    var id_val; 

    jQuery(idAmount).each(function() { 
     var index = "id"+idinc++; 
     var id_input = "<input class='id' id="+'"'+index+'"'+" "+" maxlength='1' />"; 
     id_val = $(this).attr('value'); 
     jQuery(id_input).appendTo('#id'); 
    }); 

    $("#clone").click(function() { 
     var clonedObj=$('#id').clone().insertAfter("#id"); 
     clonedObj.find('.id').each(function(){ 
      this.id='id' + idinc++; 
     }); 
    }); 

function Validate() { 
    jQuery('#error p').remove(); 

    var id_val = ''; 
    $('.id').each(function(){ id_val+=($(this).val());}); 
    var idNumber = id_val; 
    console.log(id_val); 
    var correct = true; 

    if (idNumber.length != 13 || !isNumber(idNumber)) { 
     correct = false; 
    } 

    var tempDate = new Date(idNumber.substring(0, 2), idNumber.substring(2, 4) - 1, idNumber.substring(4, 6)); 
    console.log(tempDate); 
    var id_date = tempDate.getDate(); 
    var id_month = tempDate.getMonth(); 
    var id_year = tempDate.getFullYear(); 
    var currentYear = (new Date).getFullYear(); 
    var age = currentYear - id_year; 
    var fullDate = id_date + "-" + (id_month + 1) + "-" + id_year; 


    if (!((tempDate.getYear() == idNumber.substring(0, 2)) && (id_month == idNumber.substring(2, 4) - 1) && (id_date == idNumber.substring(4, 6)))) { 
     correct = false; 
    } 

    // get the gender 
    var genderCode = idNumber.substring(6, 10); 
    var gender = parseInt(genderCode) < 5000 ? "Female" : "Male"; 

    // get country ID for citzenship 
    var citzenship = parseInt(idNumber.substring(10, 11)) == 0 ? "Yes" : "No"; 

    // apply Luhn formula for check-digits 
    var tempTotal = 0; 
    var checkSum = 0; 
    var multiplier = 1; 
    for (var i = 0; i < 13; ++i) { 
     tempTotal = parseInt(idNumber.charAt(i)) * multiplier; 
     if (tempTotal > 9) { 
      tempTotal = parseInt(tempTotal.toString().charAt(0)) + parseInt(tempTotal.toString().charAt(1)); 
     } 
     checkSum = checkSum + tempTotal; 
     multiplier = (multiplier % 2 == 0) ? 1 : 2; 
    } 
    if ((checkSum % 10) != 0) { 
     correct = false; 
    }; 

    // if no error found, hide the error message 
    if (correct) { 
     jQuery('.id').css("border","1px solid #9A8B7D"); 


     // clear the result div 
     jQuery('#result').empty(); 
     // and put together a result message 
     jQuery('#result').append('<p>South African ID Number: ' + idNumber + '</p><p>Birth Date: ' + fullDate + '</p><p>Gender: ' + gender + '</p><p>SA Citizen: ' + citzenship + '</p><p>AGE: ' + age + '</p>'); 
     jQuery('#status').html("correct"); 
    } 
    // otherwise, show the error 
    else { 
     jQuery('.id').css("border","1px solid #FF0000"); 
     jQuery('#status').html("incorrect") 
    } 

    return false; 
} 

function isNumber(n) { 
    return !isNaN(parseFloat(n)) && isFinite(n); 
} 

$('input.id').keydown(function(e){ 
    if(e.keyCode == 8){ 
     $(this).val(''); 
     $(this).prev().val(''); 
     $(this).prev().focus(); 
     Validate() 
    } 
}); 

$('input.id').on('keyup', function(){ 
    if (this.value.match(/\d+/)) { 
     var $this = $(this); 
     if ($this.next('input').length) { 
      $this.next().focus(); 
     } else { 
      Validate() 
     } 
    } 
}); 



    $(".id").keydown(function(event) { 
     // Allow: backspace, delete, tab, escape, and enter 
     if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
      // Allow: Ctrl+A 
      (event.keyCode == 65 && event.ctrlKey === true) || 
      // Allow: home, end, left, right 
      (event.keyCode >= 35 && event.keyCode <= 39)) { 
       // let it happen, don't do anything 
       return; 
     } 
     else { 
      // Ensure that it is a number and stop the keypress 
      if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) { 
       event.preventDefault(); 
      } 
     } 
    }); 
}); 

HTML：

<div id="id"> 
<span id="label">ID NUMBER:</span> 
<span id="status"></span> 
    </div> 
<button id="clone">clone</button> 

<div id="result"> </div> 

CSS：

#error { 
    color: red; 
    border: 1px solid red; 
    padding: 5px; 
    display: none; 
} 

#result { 
    padding: 20px; 
} 

.id { 
    width:16px; 
    height:16px; 
    border:1px solid #9A8B7D; 
    margin:0; 
    float:left; 
    text-align:center; 
    font-family:'itc_avant_garde_gothic_bookOb',Helvetica,sans-serif; 
    font-size:11pt; 
    padding:2px; 
} 
#label { 
    float:left; 
    font-family:'itc_avant_garde_gothic_bookOb',Helvetica,sans-serif; 
    line-height:18px; 
    font-size:11pt; 
    margin-right:10px; 
} 

Answer 1

，我看到你打電話唯一的一次是在這裏：

$('input.id').on('keyup', function(){ 
    //code 
}); 

這裏

$('input.id').keydown(function(e){ 
    //code 
}); 

這意味着問題是event handler is not delegated to a static element

$(document).on('keyup', 'input.id', function(){ 
    //code 
}); 

$(document).on('keydown', 'input.id', function(){ 
    //code 
}); 

它綁定到該文件將確保任何動態創建的元素將有相同的事件委派給他們作爲相同的選擇的任何靜態元素。

忘記的最後一部分。

clonedObj.find('.id').each(function(){ 
    this.id='id' + idinc++; 
    this.value = ''; //simply add this to remove the value 
}); 

雖然，因爲你使用jQuery，你應該儘量堅持使用jQuery。

clonedObj.find('.id').each(function(){ 
    $(this).prop('id', 'id'+ idinc++).val(''); // chain the commands 
});