[英]jQuery – on('click') append doesn't seem to work
http://jsfiddle.net/D6be5/ http://jsfiddle.net/D6be5/
HTML 的HTML
<table class="example" border="1">
<tr>
<td>
<label>Enter text</label>
<textarea>Enter text</textarea>
</td>
</tr>
<tr class="clone"></tr>
</table>
<p><button id="add-row">Add Row</button></p>
jQuery jQuery的
$(document).ready(function() {
$(this).on('click', function(event) {
if ( ! $(event.target).closest('table').hasClass('example')) {
$('table label').show();
$('table textarea').hide();
}
});
$('table td').on('click', function() {
$('table label').show();
$('table textarea').hide();
$(this).find('label').hide();
$(this).find('textarea').show();
});
$('#add-row').on('click', function() {
_this = $('table tr.clone')
.clone()
.removeClass('clone')
.insertBefore('.clone');
_this.append('<td><label>Enter text</label><textarea>Enter text</textarea></td>');
});
});
CSS 的CSS
table textarea {
display: none;
}
table .clone {
display: none;
}
The link above explains what I'm trying to do. 上面的链接说明了我要做什么。
Basically the problem is this. 基本上问题是这样的。 I have a label and textarea within a td , the textarea is hidden and only the labels show at start.
我在td中有一个标签和textarea , textarea被隐藏了,只有标签才在开始时显示。 When the user clicks on the cell of the table it hides the label and shows the textarea , which works fine until you try and add a clone of the row then it doesn't do anything.
当用户单击表的单元格时,它会隐藏标签并显示textarea ,在您尝试添加该行的克隆之前,该方法工作正常,然后它不会执行任何操作。
Edit : Forgot to mention why I'm cloning the row and adding the cells afterwards. 编辑 :忘记提及为什么我要克隆行并随后添加单元格。 In my actual code I allow for column creation as well and I do a count of the rows and add the cells after.
在我的实际代码中,我也允许创建列,我对行进行计数并在其后添加单元格。
Thank you very much for any help =) 非常感谢您的帮助=)
Another Method. 另一种方法。
$('table').on('click', "td", function() {
})
Change the click handler to 将点击处理程序更改为
$(document).on('click', 'table td', function() {
//Your code
}
You may want to try using the .on()
method on your $('table td').click()
event: 您可能要尝试在
$('table td').click()
事件上使用.on()
方法:
$('table td').on('click', function() {
$('table label').show();
$('table textarea').hide();
$(this).find('label').hide();
$(this).find('textarea').show();
});
Hope that helps 希望能有所帮助
hope it might help you 希望对您有帮助
$('.example').delegate('td', "click", function() {
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.