未使用JQuery克隆嵌套表行_Jquery

未使用JQuery克隆嵌套表行

jquery

未使用JQuery克隆嵌套表行,jquery,Jquery,我的网页中有一个表单，表单由一个表组成，而表中有一个嵌套的表。当我尝试克隆嵌套表的行时，这些行没有被克隆。但是，对于外部表，克隆工作正常。这是我的HTML代码 <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div id="division">

我的网页中有一个表单，表单由一个表组成，而表中有一个嵌套的表。当我尝试克隆嵌套表的行时，这些行没有被克隆。但是，对于外部表，克隆工作正常。这是我的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代码似乎不起作用，当我调试时，我可以看到克隆行正在创建，然后它们就消失了。多谢各位

ID的应该是唯一的。当代码运行时，将留下多个具有相同id的

tr

。请尝试改用类

另外，您似乎正在使用

按钮

，该按钮的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");
});

在HTML文档中，不能有两个ID相同的元素。ID必须是唯一的。

因此，clone（）可能无法工作，因为您不能有两个相同的ID，而只能使用

。clone（true）

@Zenith。。正确的。。你也可以用这个。。这还将附加与克隆数据关联的事件和数据。谢谢你指出：）我删除了所有的id，并用你的代码Sushanth替换了onclick函数。我仍然有同样的问题，当我调试代码时，我看到正在创建克隆行，控件转到Jquery-1.8.2.js库函数，当控件返回克隆行时，克隆行消失。ThanksLooks好像它在小提琴上工作。。你能展示一下你试过的代码吗？Susanth，别介意我把这个功能应用到submit函数的按钮弄混了。我错了，代码正在运行。我真的很感谢你的帮助。

$("#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");
});