处理添加在Div标记运行时的按钮的单击事件
提问于 2012-09-24 05:04:46
我再次提出这个问题，通过重建it....as，我仍然没有任何解决办法。
我正在开发MVC 3应用程序并使用剃须刀语法。
在这个应用程序中，我提供了评论功能。
我已经为添加注释提供了便利，并将其保存在DB中。
当用户单击“删除”按钮时，它会将消息显示为“单击”。
当用户加载实体时，先前添加的注释将显示在页面上，并使用delete按钮显示，当用户单击该按钮时，将出现“单击”msg。
现在，当用户添加一个新的注释时，它成功地保存在DB中，并与Delete按钮一起出现在页面上。
现在当用户点击删除按钮msg才会来..。(我在从DB加载新注释时附加Div标记)
我认为，有一个问题是关于附加，意味着以前的评论删除按钮工作良好，但当我添加按钮使用追加它将不起作用.
下面是部分视图中的代码，它在DB中添加注释，并再次将最新的注释带回视图以显示它。
<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标记中添加运行时，任何人都可以给出处理按钮单击事件的简单代码吗？
这是新的代码，我已经在页面中添加了您的代码，但是它仍然不起作用。
<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>
@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>
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-09-24 23:01:30
您打算在页面中包含多少次jQuery ?1应该足够了。你好像把它放在了三个不同的地方。此外，如果<html>元素是完全错误的，那么您似乎已经将脚本放在了外部。
只需列入一项内容：
<script src="@Url.Content("~/Scripts/jquery-1.8.0.min.js")" type="text/javascript"></script>此外，您应该使用.on()方法以生动的方式订阅delete按钮的单击事件：
$(document).on('click', '.deleteComment', function () {
alert('Clicked');
});最后但并非最不重要的是，您似乎在<head>元素上使用了<head>属性。那是Razor，不是WebForms --忘了那些属性吧。
因此，让我为您清理这段代码，因为它是一个完整的混乱：
@model IEnumerable<CRMEntities.Comment>
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!-- or use your own jQuery version locally: -->
@*<script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.8.1.js")"></script>*@
<script type="text/javascript">
$(document).on('click', '.deleteComment', function () {
alert('comment deleted');
});
$('.ShowComments').click(function () {
$('.ParentBlock').slideToggle('slow');
});
$('#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>
</body>
</html>Stack Overflow用户
发布于 2012-09-24 23:06:37
当用户单击“删除”按钮时，可以显示删除消息，如下所示
在我的应用程序中，当用户单击delete按钮链接时，这个div将打开以获得确认消息。
<div id="dialog-confirm" title="Delete Country">
<p>
Are you soure you wont to delete this record ?</p>
</div>
<script type="text/javascript">
$(function () {
$(".lnkDelete").button();
$(".lnkDelete").button();
$("#dialog-confirm").dialog({
autoOpen: false,
model: true,
width: 300,
resizable: false,
height: 200
});
$(".lnkDelete").click(function (e) {
e.preventDefault();
var targeturl = $(this).attr("href");
$("#dialog-confirm").dialog({
buttons: {
"Confirm": function () {
window.location.href = targeturl;
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog-confirm").dialog("open");
});
});
</script>在视野中
@foreach (var item in Model)
{
<tr>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.ID }, new { @Class = "lnkDelete" })
</td>
</tr>
}我想这会对你有帮助。
Stack Overflow用户
发布于 2012-09-24 05:11:30
如果使用的jQuery版本为1.7或更高，则应使用.on()
$('body').on('.deleteComment', 'click', function () {
alert('Clicked');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12565644
复制
腾讯云开发者
