Использование функций JQuery с несколькими текстовыми полями с одинаковым ID

Question

Я ищу информацию о том, как ссылаться на определенные текстовые поля с jquery, которые генерируются с помощью javascript.

То, что я получаю, работает только в первом экземпляре ссылки на поле.

HTML код:

Record ID<input type="text" name="ri[]" id="ri1" size="7" style="font-size:0.9em;"> 

Qty Per Box<input type="text" name="qpb[]" id="qpb1" size="7" style="font-size:0.9em;"> 

Javascript Используется для получения более строк, как и выше

<!--Dynamically Create New Rows For Data Entry--> 
<script language="javascript"> 
     function addRow(tableID) { 

      var table = document.getElementById(tableID); 

      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount); 

      var colCount = table.rows[0].cells.length; 

      for(var i=0; i<colCount; i++) { 

       var newcell = row.insertCell(i); 

       newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
       //alert(newcell.childNodes); 
       switch(newcell.childNodes[0].type) { 
        case "text": 
          newcell.childNodes[0].value = ""; 
          break; 
        case "checkbox": 
          newcell.childNodes[0].checked = false; 
          break; 
       } 
      } 
     } 

     function deleteRow(tableID) { 
      try { 
      var table = document.getElementById(tableID); 
      var rowCount = table.rows.length; 

      for(var i=0; i<rowCount; i++) { 
       var row = table.rows[i]; 
       var chkbox = row.cells[0].childNodes[0]; 
       if(null != chkbox && true === chkbox.checked) { 
        if(rowCount <= 1) { 
         alert("Cannot delete all the rows."); 
         break; 
        } 
        table.deleteRow(i); 
        rowCount--; 
        i--; 
       } 


      } 
      }catch(e) { 
       alert(e); 
      } 
     } 

    </script> 

Так что я в конечном итоге получаю несколько строк с одинаковым идентификатором/именем. То, что я просто хочу сделать, - это проверить ввод в keyup, поэтому я решил использовать этот метод .val, но он работает только в первой строке.

<script> 
$(document).ready(function() { 
    $("#ri1").keyup(function() { 
    $(this).val($(this).val().replace(/[^\d]/g, "")); 
    }); 
}); 
</script> 

Кто-нибудь знает лучшее решение для проверки ввода при генерации нескольких строк полей ввода таким образом?

Js скрипка http://jsfiddle.net/nS2LM/22/

Answer 1

Использование идентификатора более одного раза не рекомендуется, но если вы используете последний Jquery того событие делегация Ваш ответ:

<input type="text" name="ri[1]" id="ri1" size="7" style="font-size:0.9em;" class="do_stuff"> 
<input type="text" name="ri[2]" id="ri2" size="7" style="font-size:0.9em;" class="do_stuff"> 


<script> 
$(document).ready(function() { 
    $('body').on('keyup', '.do_stuff', function() { 
     $(this).val($(this).val().replace(/[^\d]/g, "")); 
    }); 
}); 
</script> 

Код выше связывает KeyUp к организму child .do_stuff, поэтому любые динамически создаваемые элементы с классом .do_stuff будут улавливаться событием keyup.