不会使用JQuery克隆嵌套的表行
不会使用JQuery克隆嵌套的表行
提问于 2013-07-20 02:54:15
我在我的网页中有一个表单，该表单由一个表格组成，而该表格又包含一个嵌套表。当我尝试克隆嵌套表的行时，这些行没有被克隆。但是，克隆对于外层表来说工作得很好。这是我的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代码似乎不起作用，当我调试时，我可以看到克隆的行正在创建，然后它们就消失了。谢谢。
回答 2
Stack Overflow用户
发布于 2013-07-20 02:58:41
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");
});Stack Overflow用户
发布于 2013-07-20 03:00:02
在HTML文档中，不能有两个具有相同ID的元素。ID必须是唯一的。因此，clone()有可能因此而无法工作，您不能拥有两个相同的ID
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17753493
复制相关文章
相似问题
腾讯云开发者
