我在删除克隆的tr时遇到问题..我的克隆功能工作正常,但每当我试图在右侧添加删除按钮时,就会发生..请帮帮我
jQuery:
$(".addjob").click(function(){
var $clone = $('table.tbll tr.cloneme:first').clone();
console.log($clone);
$clone.append("<td><div class='rmv' >Remove</div></td>");
$('table.tbll').append($clone);
});
$(".rmv").click(function(){
alert("wee");
// $(this).parents('td').remove();
});
HTML:
<table cellspacing="10" class="tbll" >
<tr>
<td>Choose Sub Heading</td><td><select name="subheading_id" style="min-width:145Px">
<option value="1" Sub heading Me</option>
<option value="2" Sub heading Me 2</option>
</select></td><td> </td>
</tr>
<tr classs="cloneme">
<td>Choose Job Title</td><td><select name="jobtitles_id" style="min-width:145Px"><?php
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
<option value="none" >None</option>
</select></td>
</tr>
<tr>
<td><div class="addjob" >Add another Job Title</div></td>
</tr>
</table>
请帮帮我。我不知道该怎么做
提前致谢..
答案 0 :(得分:0)
您的移除点击功能不适用于动态添加的元素。你必须使用jquery .on
$('body').on('click', '.rmv',function(){
alert("wee");
$(this).closest('tr').remove();
});
此外,您仍然需要classs
克隆,将其更正为class
。
这是一个工作小提琴:http://jsfiddle.net/7Z5kt/
编辑:我已将您的.parents('td')
更改为.closest('tr')
,假设您要删除整行。请相应更改。
注意:.closest有助于在层次结构中找到所需的元素,并帮助您避免.parents()
返回的元素
编辑2:这是一个使用.live在jquery 1.7之前使用的版本
$('.rmv').live('click', function(){
alert("wee");
$(this).closest('tr').remove();
});
答案 1 :(得分:0)
您只需要一个事件委托: http://jsfiddle.net/h9pH5/
$(".addjob").click(function () {
var $clone = $('table.tbll tr.cloneme:first').clone();
console.log($clone);
$clone.append("<td><div class='rmv' >Remove</div></td>");
$('table.tbll').append($clone);
});
$('.tbll').on('click', '.rmv', function () {
alert("wee");
$(this).closest('tr').remove();
});
并且在您的HTML中,您在
中有多个s
`<tr classs="cloneme">`
//--^---here