Handling Click Event Of Button Which Added In Div Tag Runtime
Solution 1:
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:
<script src="@Url.Content("~/Scripts/jquery-1.8.0.min.js")" type="text/javascript"></script>
Also you should use the .on() method to subscribe to the click event of the delete button in a lively manner:
$(document).on('click', '.deleteComment', function () {
alert('Clicked');
});
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:
@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>
Solution 2:
You can show your delete message when user click on delete button like below
In my application when user click on delete button link then this div open for confirmation message .
<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>
In the view
@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>
}
i think this will help you.
Solution 3:
If you're using a jQuery version of 1.7 or above then you should use .on()
$('body').on('.deleteComment', 'click', function () {
alert('Clicked');
});
Solution 4:
You are adding the event in the document Ready event .. But the elements are not available then to attach the events.
You need to make sure you add the event after element is created... So add that in the success callback function ..
Otherwise the created element will not be associated with the event handler...
success: function(data) {
$("p.p12").append('<button type="button" id=' + data.Id + ' class="deleteComment2">Delete</button></div>');
// Add the event to the Delete button when created...
$('#' + data.Id).on('click', function() {
alert('Clicked');
});
}
Post a Comment for "Handling Click Event Of Button Which Added In Div Tag Runtime"