我想在点击一个链接后显示一个表格，但只有当链接在表格的外面时它才有效，但是一旦链接在表格内部它就不起作用了，我想知道为什么？可能有更好的方法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Show and Hide</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
<script>
$(function () {
$('.reply-comment').on('click', function (e) {
e.preventDefault();
var form = $(this).next('.reply-form');
var CommentID = $(this).attr('id');
if (form.is(':visible')) {
// hide it
form.hide(function () {
$('#' + CommentID).html('<a href="" class="reply-comment" id="reply-comment-' + CommentID + '"> Reply </a>');
});
}else {
// show it
form.show(function () {
$('#' + CommentID).html('<a href="" class="reply-comment" id="reply-comment-' + CommentID + '"> Cancel </a>');
});
}
});
});
</script>
<style>
.reply-form {
display:none;
}
</style>
</head>
<body>
<div>Start stuff etc etc...</div>
<br />
<table width="300" border="1" bgcolor="#ffffff" cellpadding="5" cellspacing="0">
<tr>
<td> Start </td>
<td> <!-- this will not work, why? -->
<a href="" id="17" class="reply-comment"> Reply </a>
</td>
<td> Out </td>
</tr>
</table>
<br> <!-- this works, but I can't use like this -->
<!-- a href="" id="1" class="reply-comment"> Reply </a -->
<div class="reply-form well">
<br />
<table width="300" border="1" bgcolor="#1A1A1A" cellpadding="5" cellspacing="0">
<tr>
<td><form name="reply-form" id="repl-form" method="POST">
<textarea name="Comment" rows="6" class="span10"></textarea>
<br />
<br />
<input type="submit" class="btn btn-primary replycommentsubmitbutton" value="Reply" />
</td></form>
<tr>
</table>
</div>
<p> </p>
<div>More stuff here etc etc...</div>
</body>
</html>
最佳答案
交换这段代码
var form = $(this).next('.reply-form');
与:
var form = $('.reply-form');
关于jquery - 从另一个表中显示和隐藏表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20787677/