我正在开发 MVC 3 应用程序并使用 razor 语法。
在此应用程序中，我提供评论功能。
我在每个 Div 中添加了评论链接。 。当用户单击该评论链接时，它会加载包含用于添加评论的控件组的部分 View 。
我使用列表来显示记录，当用户单击评论按钮时，我使用部分 View 来加载评论控件。
现在的问题是我只能为第一条记录添加评论，我无法为其他记录添加评论...
有什么问题吗？
请检查下面的图片...
这是部分 View 中的代码，它在数据库中添加评论，并再次将最新评论提取回 View 以显示它。
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#AddCommentButton').click(function ()
{
var comment1 = $('#Comment').val();
if (comment1 == '') {
alert('Please enter a comment');
return;
}
$.ajax({
type: 'post',
url: '/Comment/SaveComments',
dataType: 'json',
data:
{
'comments' : $('#Comment').val(),
'EType' : @Html.Raw(Json.Encode(ViewBag.EType)),
'EId' : @Html.Raw(Json.Encode(ViewBag.EId))
},
success: function (data) {
$("p.p12").append('<button type="button" id=' + data.Id + ' class="deleteComment2">Delete</button></div>')
}
});
});
});
</script>
当我单击删除按钮时，我使用下面的代码...
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$('.deleteComment').live('click', function () {
alert('Clicked');
});
</script>
现在，问题的摘要是我附加 div 并在该 div 中添加一个按钮，我试图获取该按钮的单击事件，但我无法获取该事件。
任何人都可以提供简单的代码，用于在 Div 标记中添加按钮运行时时处理按钮的单击事件。
这是 Darin Dimitrov 的更新代码
@model IEnumerable<CRMEntities.Comment>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!DOCTYPE html>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).on('click', '.deleteComment', function()
{
alert('comment deleted');
});
$(document).ready(function () {
alert("Doc loaded");
});
</script>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#AddCommentButton').click(function () {
$('#comments22').append('<input type="button" class="deleteComment" value="Delete" /><br/>');
$('#comments22').append('<input type="button" class="deleteComment" value="Delete" /><br/>');
$('#comments22').append('<input type="button" class="deleteComment" value="Delete" /><br/>');
$('#comments22').append('<input type="button" class="deleteComment" value="Delete" /><br/>');
});
});
</script>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".ShowComments").click(function () {
$(".ParentBlock").slideToggle("slow");
});
});
</script>
</head>
<body>
@{
<div class="ParentBlock">
@foreach (var item in Model)
{
<div class="OwnerClass" id="OwnerName">
<span class="EmpName"> @Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { @style = "color:#1A6690;" })</span>
@Html.DisplayFor(ModelItem => item.CommentDateTime)
<span class="EmpName"><button type="button" id = "@item.Id" class="deleteComment">Delete</button></span>
<span class="EmpName"> @Html.ActionLink("Delete", "Delete", "Comment", new { id = item.Id }, new { @style = "color:#1A6690;" })</span>
<p class="CommentP">
@Html.DisplayFor(ModelItem => item.CommentText)
</p>
<br />
<a class="Delete222" style="cursor:move;display:none;">DeleteNew</a>
<br />
</div>
}
<p class="p12">
</p>
</div>
<p id="ClassPara" class="ShowComments" onclick="chkToggle()">Show All Comments</p>
}
@Html.TextArea("Comment", "", 5, 80, "asdsd")
<input type="button" value="Add Comment" id="AddCommentButton"/>
<input type="button" value="Clear" onclick="clearText()"/>
<br />
<div id="comments22">
<input type="button" class="deleteComment" value="Delete" /><br/>
<input type="button" class="deleteComment" value="Delete" /><br/>
<input type="button" class="deleteComment" value="Delete" /><br/>
</div>
</body>
</html>
最佳答案
您已订阅#AddCommentButton的点击事件。但正如你所知，id 在整个 DOM 中必须是唯一的。 id="AddCommentButton" 只能有 1 个元素。因此，您应该为 Add Comment 按钮使用类选择器:
$('.addComment').click(...);
和你的按钮:
<input type="button" value="Add Comment" class="addComment" />
另外，我希望您已经注意到 this answer 。显然你还没有，因为我仍然看到你在 View 中硬编码网址而不是使用助手。
关于javascript - 部分 View 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12563416/