javascript - JQuery Clone 不适用于 chrome，但适用于 Firefox

标签 javascript jquery internet-explorer google-chrome

我一直在尝试让我的 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>

我该如何解决这个问题？任何帮助将不胜感激!

谢谢! 乔恩

最佳答案

问题不是 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。

关于javascript - JQuery Clone 不适用于 chrome，但适用于 Firefox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17118062/

上一篇：javascript - 索引字典的编辑距离

下一篇：PHP 重复表单验证。如何使用javascript进行验证？

相关文章：

javascript - 在元素呈现时运行函数

来自数组的 JavaScript 缩略图

javascript - 如何创建 Konva-React 上下文菜单

javascript - 无法在父组件中运行子组件方法

javascript - 如果前 5 个字符等于输入字段，如何设置选择框选项

jquery - 简单的 JQuery 动画()；不能在 ie 8 中工作？

javascript - JavaScript 中的 PHP

javascript - JQuery 手机 : How to start the page x pixels scrolled down?

javascript - 调用函数时奇怪的 JavaScript 语法

html - CSS/XHTML 菜单 - 在所有浏览器中工作 - IE6 帮助

©2024 IT工具网  联系我们