Question

我的网页中有一个表单，表单由一个表组成，表中包含一个嵌套表。当我尝试克隆嵌套表的行时，行不会被克隆。但是克隆对于外表来说很好。这是我的HTML代码

<html lang="en">
        <head>
            <meta charset="utf-8">
        </head>

        <body>
        <div id="division">
            <form class="allergyrow">
                <table id="tab" border="1">
                    <thead>
                        <tr>
                            <th scope="col">Remove</th>
                            <th scope="col">Allergy</th>
                            <th scope="col">Reaction</th>
                            <th scope="col">Adverse Event Date</th>
                            <th scope="col">Comment</th>

                        </tr>
                    </thead>

                    <tbody>
                        <tr class="datarow">
                            <td><input type = "checkbox" id = "remove" class="remove" value = "Remove" /></td>
                            <td><input type = "text" id = "myText" class="myText" /></td>
                            <td >
                                <div>
                                <table id="inner" class="inner">
                                <tbody>
                                <tr id="innerrow" class="innerrow">
                                <td>
                                <select id = "myList" class="myList">
                                <option value = "1">Rashes</option>
                                <option value = "2">Shock</option>
                                <option value = "3">Asthma</option>
                                <option value = "4">Nausea</option>
                                <option value = "5">Anemia</option>
                                <option value = "6">Unknown/Other</option>
                                </select>
                                </td>
                                <td>
                                <select id = "reaction" class="reaction">
                                <option>Yes</option>
                                <option>Mild</option>
                                <option>Moderate</option>
                                <option>severe</option>
                                </select>
                                </td>
                                <td>
                                <button id="plus" class="plus">plus</button>
                                </td>
                                </tr>

                                </tbody>                            
                                </table>
                                </div>
                            </td>
                            <td><input type="date" id="eventdate" class="eventdate"/></td>
                            <td><input type="text" id="comment"  class="comment"/></td>

                    </tbody>
                </table>
            </form>
            <button id="submit">Submit</button>
            </div>

这是我用来克隆不可侵犯的行的Jquery代码

 $("#plus").click(function(){
            var row=$("#innerrow");
            row.clone().appendTo("#inner");
            s
         });

但是JQuery代码似乎不起作用，当我调试时，我可以看到正在创建克隆的行然后它们就消失了。谢谢。

Answer 1

ID 应该是唯一的。当代码有效时，您将保留多个具有相同ID的tr's。尝试使用类

此外，您似乎正在使用button，这是非唯一按钮的ID。您还需要将其替换为类。

这里的主要问题是您需要委托事件。事件仅绑定到与事件处理程序关联时DOM中可用的元素。但在您的情况下，当发生这种情况时，您的克隆元素不存在。

替换代码并确保删除您认为将要克隆的元素的ID。

$("#inner").on('click', '.plus', function (e) {
    e.preventDeafault(); // Also need to call this to prevent form submission
    var row = $(".innerrow").first();
    row.clone().appendTo("#inner");
});

<强> Check Fiddle

Answer 2

在HTML文档中，您不能拥有两个具有相同ID的元素。 ID必须是唯一的。因此，clone（）可能无法正常工作，因此您无法拥有两个相同的ID

使用JQuery不会克隆嵌套表行

2 个答案: