JQuery Clone не работает на chrome, но работает в firefox

Question

Я пытался заставить мой jsfiddle работать, чтобы работать некоторое время сейчас, и я понял, почему он работает в firefox, но не в Chrome или IE, но Я не знаю решения для его исправления, чтобы он работал повсюду. Проблема заключается в дополнительном class="name". Когда я удаляю его и, таким образом, удаляю свои собственные правила проверки, он работает. Если я добавлю его обратно, это не так.

вот Javascript код:

$.validator.addClassRules({ 
     name: { 
      required: true, 
      minlength: 2 
     } 
    }); 
    $.validator.addClassRules({ 
     amt: { 
      required: true, 
      number: true, 
      minValue: 0 

     } 
    }); 
    $("#numinjs").change(function() { 
     var $table = $('#inj_table'); 
     var index = $table.find("tr").length; 
     var currval = parseInt($("#numinjs").val(), 10); 
     var oldtxval = parseInt($("#oldnuminjs").attr("value"), 10); 
     var numtimes = 0; 
     if (currval > oldtxval) { 
      numtimes = currval - oldtxval; 
      for (var i = 0; i < numtimes; i++) { 
       var $new_row = $table.find("tr:last").clone(false); 
       //set the index of the td field.    
       $new_row.find('td')[0].innerHTML = i + 1 + oldtxval; 
       //change input id's 
       $new_row.find("input:checkbox").attr("disabled", "true").attr("hidden", "true"); 
       $new_row.find("input:hidden").attr("value", ""); 
       $new_row.find("input,select").attr("name", function ($) { 
        // break the field name and it's number into two parts 
        var parts = this.name.match(/(\D+)(\d+)$/); 
        // create a unique name for the new field by incrementing 
        // the number for the previous field by 1 
        return parts[1] + (++parts[2]); 
        // repeat for id attributes 
       }).attr("id", function ($) { 
        var parts = this.id.match(/(\D+)(\d+)$/); 
        return parts[1] + (++parts[2]); 
       }).attr("value", ""); 

       $new_row.find("div").attr("id", function ($) { 
        var parts = this.id.match(/(\D+)(\d+)$/); 
        return parts[1] + (++parts[2]); 
       }); 
       $table.append($new_row); 
      } 
      $('#oldnuminjs').attr('value', currval); 
     } else if (oldtxval > currval) { 
      numtimes = oldtxval - currval; 
      for (var j = 0; j < numtimes; j++) { 
       $('#inj_table tr').last().remove(); 
      } 
      $('#oldnuminjs').attr('value', currval); 
     } 

    }); 
    $("#num_concerns").change(function() { 
     var $table = $('#concern_table'); 
     var index = $table.find("tr").length; 
     var currval = parseInt($("#num_concerns").val(), 10); 
     var oldtxval = parseInt($("#old_num_concern").attr("value"), 10); 
     var numtimes = 0; 
     if (currval > oldtxval) { 
      numtimes = currval - oldtxval; 
      for (var i = 0; i < numtimes; i++) { 
       var $new_row = $table.find("tr:last").clone(false); 
       //set the index of the td field.    
       $new_row.find('td')[0].innerHTML = i + 1 + oldtxval; 
       //change input id's 
       $new_row.find("input,select").attr("name", function ($) { 
        // break the field name and it's number into two parts 
        var parts = this.name.match(/(\D+)(\d+)$/); 
        // create a unique name for the new field by incrementing 
        // the number for the previous field by 1 
        return parts[1] + (++parts[2]); 
        // repeat for id attributes 
       }).attr("id", function ($) { 
        var parts = this.id.match(/(\D+)(\d+)$/); 
        return parts[1] + (++parts[2]); 
       }).attr("value", ""); 
       $new_row.find("div").attr("id", function ($) { 
        var parts = this.id.match(/(\D+)(\d+)$/); 
        return parts[1] + (++parts[2]); 
       }); 
       $table.append($new_row); 
      } 
      $('#old_num_concern').attr('value', currval); 
     } else if (oldtxval > currval) { 
      numtimes = oldtxval - currval; 
      for (var j = 0; j < numtimes; j++) { 
       $('#concern_table tr').last().remove(); 
      } 
      $('#old_num_concern').attr('value', currval); 
     } 

    }); 
    $("#evalanimal").validate(); 
    $('#reclassify_ckbk').change(function() { 
     $('#animal_type').attr('disabled', !this.checked); 
    }); 

с HTML код следующим образом:

<hr /> 
<br /> 

<h2> Evaluate Concnerns</h2> 

<form action="/evaluateanimal" method="post" name="evalanimal" id="evalanimal"> 
    <input type="hidden" name="animal_key" id="animal_key" value="keyval" /> 
    <input type="hidden" name="oldnuminjs" id="oldnuminjs" value="2" /> 

    <table> 

     <tr> 
      <tr> 
       <td>Number of Concerns:</td> 
       <td> 
        <select name="num_concerns" id="num_concerns"> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
         <option>4</option> 
         <option>5</option> 
         <option>6</option> 
         <option>7</option> 
         <option>8</option> 
         <option>9</option> 
         <option>10</option> 
         <option>11</option> 
         <option>12</option> 
         <option>13</option> 
         <option>14</option> 
         <option>15</option> 
         <option>16</option> 
         <option>17</option> 
         <option>18</option> 
         <option>19</option> 
         <option>20</option> 
         <option>21</option> 
         <option>22</option> 
         <option>23</option> 
         <option>24</option> 
         <option>25</option> 
         <option>26</option> 
         <option>27</option> 
         <option>28</option> 
         <option>29</option> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2"> 
        <input type="hidden" name="old_num_concern" id="old_num_concern" value="1" /> 
        <table name="concern_table" id="concern_table" cellpadding="2"> 
         <tr> 
          <th>#</th> 
          <th>Concern</th> 
          <th>Ranking</th> 
         </tr> 
         <tr style="text-align:center;"> 
          <td>1</td> 
          <td> 
           <input type="text" name="concern_1" id="concern_1" class="name" /> 
          </td> 
          <td> 
           <select name="concern_severity_1" id="concern_severity_1"> 
            <option>Primary</option> 
            <option>Secondary</option> 
            <option>Tertiary</option> 
            <option>Incidental</option> 
           </select> 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
    </table> 
    <hr />Number of Injuries: 
    <select name="numinjs" id="numinjs"> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     <option>6</option> 
     <option>7</option> 
     <option>8</option> 
     <option>9</option> 
     <option>10</option> 
     <option>11</option> 
     <option>12</option> 
     <option>13</option> 
     <option>14</option> 
     <option>15</option> 
     <option>16</option> 
     <option>17</option> 
     <option>18</option> 
     <option>19</option> 
    </select> 
    <br /> 
    <h4>Please Enter the injuries below. Replicates will be ignored</h4> 

    <table name="inj_table" id="inj_table" cellpadding="2"> 
     <tr> 
      <th>#</th> 
      <th>Delete?</th> 
      <th>Name</th> 
      <th>Body Part</th> 
      <th>Status</th> 
     </tr> 
     <tr style="text-align:center;"> 
      <td>1</td> 
      <td> 
       <input type="hidden" name="orig_key_1" value="Wet/Cold" /> 
       <input type="checkbox" name="del_injury_1" id="del_injury_1" value="Wet/Cold" /> 
      </td> 
      <td> 
       <input type="text" name="injury_name_1" id="injury_name_1" value="Wet/Cold" class="name" /> 
      </td> 
      <td> 
       <input type="text" name="injury_body_1" id="injury_body_1" value="" class="name" /> 
      </td> 
      <td> 
       <select name="injury_status_1" id="injury_status_1"> 
        <option selected="selected">New</option> 
        <option>Improving/Healing</option> 
        <option>Historical</option> 
       </select> 
      </td> 
     </tr> 
     <tr style="text-align:center;"> 
      <td>2</td> 
      <td> 
       <input type="hidden" name="orig_key_2" value="Bleeding" /> 
       <input type="checkbox" name="del_injury_2" id="del_injury_2" value="Bleeding" /> 
      </td> 
      <td> 
       <input type="text" name="injury_name_2" id="injury_name_2" value="Bleeding" class="name" /> 
      </td> 
      <td> 
       <input type="text" name="injury_body_2" id="injury_body_2" value="" class="name" /> 
      </td> 
      <td> 
       <select name="injury_status_2" id="injury_status_2"> 
        <option selected="selected">New</option> 
        <option>Improving/Healing</option> 
        <option>Historical</option> 
       </select> 
      </td> 
     </tr> 
    </table> 
    <hr /> 

    <input type="submit" id="submit" style="float:left;width:auto !important;" value="Submit Evaluation" disabled="disabled" /> 
</form> 

Как это исправить? Любая помощь будет очень признательна!

Спасибо! Jon

Answer 1

Вопрос не name это id, и это потому, что ваше поле ввода (orig_key_ #) не один, в результате чего null.

}).attr("id", function ($) { 
    var parts = this.id.match(/(\D+)(\d+)$/); 
    if(parts == null) return;     /* add this */ 
    return parts[1] + (++parts[2]); 

посмотреть здесь: http://jsfiddle.net/vol7ron/7yqVw/17/

Есть несколько способов это исправить; в том числе, но не ограничиваясь ими:

• Проверка на null и не ссылаться parts
• Добавить || ['',''] после match()
• Добавить id в поле ввода (возможно, самый простой)

Для этого типа работы я рекомендую использовать Knockout.js (мои предпочтения) или Ember.js, чтобы у вас был лучший MVVM в вашем JavaScript.