I am putting this question again by reconstructing it….as I still not have any solution…
I am developing MVC 3 application and using razor syntax.
In this application I am giving commenting facility.
I have given the facility to adding a comment and it saved in DB.
and when user clicks on delete button it displays the message as “Clicked”.
When user load entity, previously added comments get displayed on page with
delete button and when user click on that button the “clicked” msg appears.
now, when user add a new comment, it saved in DB sucsessfully and also appear on the page
along with Delete button.
now when user click on delete button msg wontcome…
( I append the Div tag while loading the new comment from DB)
I think , there is a issue regarding append, means previous comments Delete button
work well, but when I add button using append it wont works…
Here is the code which is in partial view which add comment in DB and again fetches latest comment back to view to display It.
<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>
I use below code, when i clicked on the delete button…
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$('.deleteComment').live('click', function () {
alert('Clicked');
});
</script>
Now , the summary of a problem is I append div and in that div I add a button and I am trying to get click event of that button but I cant get that event.
Can anyone please give the simple code for handling of button’s click event when button get added runtime in the Div tag.
Here is the new code, I have added your code in page, but it still not working.
<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>
How many times do you intend to include jQuery in your page? 1 should be enough. You seem to have included it in a 3 different places. Also you seem to have placed your scripts outside if the
<html>element which is completely wrong.Only one inclusion is necessary:
Also you should use the
.on()method to subscribe to the click event of the delete button in a lively manner:And last but not least you seem to be using the
runat="server"attribute on your<head>element. That’s Razor, not WebForms – forget about those attributes.So let me clean this code for you because it is a complete mess: