使用JQuery不会克隆嵌套表行

Question

I have a form in my webpage and the form consists of a table which in return has a nested table in it. 我的网页中有一个表单，表单由一个表组成，表中有一个嵌套表。 when I try to clone the rows of the nested table, the rows are not getting cloned. 当我尝试克隆嵌套表的行时，行不会被克隆。 However the cloning works fine for the outer table. 但是克隆对于外表来说很好。 Here is my HTML code 这是我的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>

Here is my Jquery code which I am using to clone the innertable rows 这是我的Jquery代码，我用它来克隆不可用的行

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

but the JQuery code doesn't seem to be working, when I debug I can see that the cloned rows are being created and then they disappear. 但是JQuery代码似乎不起作用，当我调试时，我可以看到正在创建克隆的行然后它们就消失了。 Thank you. 谢谢。

Answer 1

ID's are supposed to be unique. ID应该是唯一的。 When the code works , you will be left multiple tr's with the same id. 当代码工作时，你将留下多个具有相同id的tr's 。 Try using a class instead 尝试使用类来代替

Also you seem to be using the button which is the id of the button that is not unique. 此外，您似乎正在使用button ，该按钮是不唯一的按钮的ID。 You need to replace that with a class as well. 您还需要将其替换为类。

The main problem here is you need to delegate the events. 这里的主要问题是您需要委派事件。 Events are only bound to elements that are available in the DOM when event handler is associated. 事件仅绑定到与事件处理程序关联时DOM中可用的元素。 But in your case your cloned element is not present when this happens. 但在您的情况下，当发生这种情况时，您的克隆元素不存在。

Replace the code with and make sure you remove the id's for the elements that you think will be cloned. 替换代码并确保删除您认为将克隆的元素的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

In a HTML document, you can't have two elements with same ID. 在HTML文档中，您不能拥有两个具有相同ID的元素。 An ID must be unique. ID必须是唯一的。 So it's possible that clone() doesn't work because of that, you can't have two identical IDs 因此，clone（）可能无法正常工作，因此您不能拥有两个相同的ID

使用JQuery不会克隆嵌套表行

问题描述

2 个解决方案

解决方案1
1 2013-07-19 18:58:41

解决方案2
0 2013-07-19 19:00:02

使用JQuery不会克隆嵌套表行

问题描述

2 个解决方案

解决方案1 1 2013-07-19 18:58:41

解决方案2 0 2013-07-19 19:00:02

解决方案1
1 2013-07-19 18:58:41

解决方案2
0 2013-07-19 19:00:02