我一直在尝试让我的jsfiddle工作Fiddle Link工作一段时间，我想出了为什么它在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>
我该如何解决这个问题？非常感谢任何帮助！
谢谢！ 乔恩
答案 0 :(得分：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，以便在JavaScript中拥有更好的MVVM。