gpt4 book ai didi

javascript - 处理Div标签运行时添加的按钮的点击事件

转载 作者:行者123 更新时间:2023-12-02 19:20:39 24 4
gpt4 key购买 nike

我通过重构再次提出这个问题......因为我仍然没有任何解决方案......

我正在开发 MVC 3 应用程序并使用 razor 语法。

在此应用程序中,我提供评论功能。

我已经提供了添加评论的功能并将其保存在数据库中。

当用户单击删除按钮时,它会显示消息“已单击”。

当用户加载实体时,之前添加的注释将显示在页面上删除按钮,当用户单击该按钮时,会出现“已单击”消息。

enter image description here

现在,当用户添加新评论时,它已成功保存在数据库中,并且也显示在页面上以及删除按钮。

现在,当用户单击删除按钮时,消息将不会出现...(我在从数据库加载新评论时附加 Div 标签)

我认为,有一个关于追加的问题,意味着以前的评论删除按钮工作得很好,但是当我使用附加添加按钮时,它不会工作......

这是部分 View 中的代码,它在数据库中添加评论,并再次将最新评论提取回 View 以显示它。

    <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>

最佳答案

您打算在页面中包含多少次 jQuery? 1个应该就够了。您似乎已将其包含在 3 个不同的地方。另外,如果<html>,您似乎已将脚本放在外面这是完全错误的元素。

只需包含一项:

<script src="@Url.Content("~/Scripts/jquery-1.8.0.min.js")" type="text/javascript"></script>

您还应该使用 .on()活泼订阅删除按钮点击事件的方法:

$(document).on('click', '.deleteComment', function () {
alert('Clicked');
});

最后但并非最不重要的一点是,您似乎正在使用 runat="server"您的 <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>

关于javascript - 处理Div标签运行时添加的按钮的点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12565644/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com