处理按钮的点击事件里面添加在DIV标签运行 [英] Handling click event of button which added in Div tag runtime
本文介绍了处理按钮的点击事件里面添加在DIV标签运行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我再次把这个问题通过重建它....因为我还没有任何解决方案...
我开发MVC 3应用程序，并使用剃刀语法。
在这个应用程序，我给评论设施。
我已经给设施添加注释，并将其保存在数据库中。
当用户点击删除按钮，它显示的信息为点击。
当用户负载实体，previously添加评论能显示的页面上有
删除按钮，当该按钮用户点击点击显示味精。
现在，当用户添加一个新的评论，它保存在数据库sucsessfully也出现在网页上
随着删除按钮。
现在当删除按钮味精wontcome用户点击...
（我追加div标签加载从数据库中新评论）
我想，有关于追加一个问题，意味着previous评论删除按钮
工作得很好，但是当我使用添加按钮添加它不会工作...
下面是code这是局部视图这在DB新增评论，并再次获取最新评论返回查看，以显示它。
＆LT;脚本SRC =../../脚本/ jquery.js和类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃AddCommentButton'）。点击（函数（） {
。VAR注释1 = $（'＃评论）VAL（）;
如果（注释1 ==''）{
警报（请输入评论'）;
返回;
}
$阿贾克斯（{ 类型：'后'，
网址：'/评论/ SaveComments'，
数据类型：JSON，
数据：
{ 意见：$（'＃评论）VAL（）。
协议类型：@ Html.Raw（Json.En code（ViewBag.EType））
'开斋节'：@ Html.Raw（Json.En code（ViewBag.EId）） }，
成功：功能（数据）{
$（p.p12）追加（'＆LT;按钮式=按钮ID ='+ data.Id +'级=deleteComment2＆GT;删除＆LT; /按钮＆GT;＆LT; / DIV＆GT;'） } }）;
}）;
}）;
＆LT; / SCRIPT＆GT;
我用低于code，当我点击删除按钮...
＆LT;脚本SRC =../../脚本/ jquery.js和类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT; $（'。deleteComment'）。生活（'点击'，功能（）{
警报（点击）;
}）;＆LT; / SCRIPT＆GT;
现在，问题的总结我追加DIV和在该div我添加一个按钮，我试图让单击该按钮的事件，但我不能让该事件。
的任何人都可以请给简单的code为按钮的单击事件处理时，按钮div标签得到补充运行。的
下面是新的code，我增加了页面的code，但它仍然没有工作。
＆LT;脚本SRC =../../脚本/ jQuery的-1.5.1.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =../../脚本/ jQuery的-1.8.0.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =../../脚本/ jquery.validate.unobtrusive.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =../../脚本/ jquery.unobtrusive-ajax.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =../../脚本/ jquery.validate.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;@model IEnumerable的＆LT; CRMEntities.Comment＆GT;＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT;头=服务器＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;！DOCTYPE HTML＆GT;
＆LT;脚本SRC =../../脚本/ jquery.js和类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT; $（文件）。在（'点击'，'.deleteComment'，函数（）
{
警报（'意见'中删除）;
}）;
$（文件）。就绪（函数（）{
警报（文件加载）;}）;
＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =../../脚本/ jquery.js和类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT; $（文件）。就绪（函数（）{
$（'＃AddCommentButton'）。点击（函数（）{ $（'＃comments22'）追加（'＆LT;输入类型=按钮级=deleteCommentVALUE =删除/＆GT;＆LT; BR /＆GT;'）;
$（'＃comments22'）追加（'＆LT;输入类型=按钮级=deleteCommentVALUE =删除/＆GT;＆LT; BR /＆GT;'）;
$（'＃comments22'）追加（'＆LT;输入类型=按钮级=deleteCommentVALUE =删除/＆GT;＆LT; BR /＆GT;'）;
$（'＃comments22'）追加（'＆LT;输入类型=按钮级=deleteCommentVALUE =删除/＆GT;＆LT; BR /＆GT;'）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =../../脚本/ jquery.js和类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（。ShowComments）。点击（函数（）{
$（。ParentBlock）的slideToggle（慢）。 }）;
}）;
＆LT; / SCRIPT＆GT;＆LT; /头＆GT;
＆LT;身体GT;@ { ＆LT; DIV CLASS =ParentBlock＆GT; @foreach（以型号VAR项）
{
＆LT; DIV CLASS =OwnerClassID =OWNERNAME＆GT;
＆LT;跨度类=EmpName＆GT; @ Html.ActionLink（item.Owner.FullName，详细信息，雇员，新{ID = item.OwnerId}，{新= @style颜色：＃1A6690;}）LT; / SPAN＆GT; @ Html.DisplayFor（ModelItem =＆GT; item.CommentDateTime） ＆LT;跨度类=EmpName＆GT;＆LT;按钮式=按钮ID =@ item.Id级=deleteComment＆GT;删除＆LT; /按钮＆GT;＆LT; / SPAN＆GT; ＆LT;跨度类=EmpName＆GT; @ Html.ActionLink（删除，删除，注释，新{ID = item.Id}，{新= @style颜色：＃1A6690;}）LT; / SPAN＆GT;
＆LT; p =类CommentP＆GT;
@ Html.DisplayFor（ModelItem =＆GT; item.CommentText）
＆所述; / P＆GT; ＆LT; BR /＆GT;
＆LT;一类=Delete222的风格=光标：移动;显示：无;＆GT; DeleteNew＆LT; / A＆GT;
＆LT; BR /＆GT; ＆LT; / DIV＆GT;
}
＆LT; p =类P12＆GT; ＆所述; / P＆GT;＆LT; / DIV＆GT; ＆LT; p n =ClassPara级=ShowComments的onclick =chkToggle（）＆gt;显示所有评论＆LT; / P＆GT;} @ Html.TextArea（注释，，5，80，asdsd）
＆LT;输入类型=按钮值=添加注释ID =AddCommentButton/＆GT;
＆LT;输入类型=按钮值=清除的onclick =明文（）/＆GT; ＆LT; BR /＆GT; ＆LT; DIV ID =comments22＆GT;
＆LT;输入类型=按钮级=deleteCommentVALUE =删除/＆GT;＆LT; BR /＆GT;
＆LT;输入类型=按钮级=deleteCommentVALUE =删除/＆GT;＆LT; BR /＆GT;
＆LT;输入类型=按钮级=deleteCommentVALUE =删除/＆GT;＆LT; BR /＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
多少次，你打算包括jQuery的在你的网页？ 1应该够了。你似乎在3个不同的地方，包括它。另外你似乎已经放在外面你的脚本，如果＆LT; HTML方式＆gt; 元素，这是完全错误的。
只有一个包容是必要的：
＆LT;脚本的src =@ Url.Content（〜/脚本/ jQuery的-1.8.0.min.js）TYPE =文/ JavaScript的＆GT;＆LT ; / SCRIPT＆GT;
此外，你应该使用。对（）方法订阅删除按钮的单击事件生动地：
的$（document）。在（'点击'，'.deleteComment'，函数（）{
警报（点击）;
}）;
和最后但并非最不重要的，你似乎可以用在你的＆LT的元素。这是剃刀，不是的WebForms - 忘掉那些属性。 =服务器属性; HEAD＆GT;
因此，让我打扫code你，因为它是一个完整的烂摊子：
@model IEnumerable的＆LT; CRMEntities.Comment＆GT;
@ {
布局= NULL;
}
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENGT＆;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8/＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV CLASS =ParentBlock＆GT;
@foreach（以型号VAR项）
{
＆LT; DIV CLASS =OwnerClassID =OWNERNAME＆GT;
＆LT;跨度类=EmpName＆GT;
@ Html.ActionLink（
item.Owner.FullName，
细节，
雇员，
新{ID = item.OwnerId}，
新{@style =COLOR：＃1A6690; }
）
＆LT; / SPAN＆GT; @ Html.DisplayFor（ModelItem =＆GT; item.CommentDateTime） ＆LT;跨度类=EmpName＆GT;
＆LT;按钮式=按钮ID =@ item.Id级=deleteComment＆GT;删除＆LT; /按钮＆GT;
＆LT; / SPAN＆GT; ＆LT;跨度类=EmpName＆GT;
@ Html.ActionLink（
删除，
删除，
评论，
新{ID = item.Id}，
新{@style =COLOR：＃1A6690; }
）
＆LT; / SPAN＆GT; ＆LT; p =类CommentP＆GT;
@ Html.DisplayFor（ModelItem =＆GT; item.CommentText）
＆所述; / P＆GT; ＆LT; BR /＆GT;
＆LT;一类=Delete222的风格=光标：移动;显示：无;＆GT; DeleteNew＆LT; / A＆GT;
＆LT; BR /＆GT;
＆LT; / DIV＆GT;
}
＆LT; p =类P12＆GT;＆LT; / P＆GT;
＆LT; / DIV＆GT; ＆LT; p n =ClassPara级=ShowComments的onclick =chkToggle（）＆gt;显示所有评论＆LT; / P＆GT; @ Html.TextArea（注释，，5，80，asdsd） ＆LT;输入类型=按钮值=添加注释ID =AddCommentButton/＆GT;
＆LT;输入类型=按钮值=清除的onclick =明文（）/＆GT; ＆LT; BR /＆GT; ＆LT; DIV ID =comments22＆GT;
＆LT;输入类型=按钮级=deleteCommentVALUE =删除/＆GT;＆LT; BR /＆GT;
＆LT;输入类型=按钮级=deleteCommentVALUE =删除/＆GT;＆LT; BR /＆GT;
＆LT;输入类型=按钮级=deleteCommentVALUE =删除/＆GT;＆LT; BR /＆GT;
＆LT; / DIV＆GT; ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js\"></script>
！＆LT; - 或在本地使用自己的jQuery版本： - ＆GT;
@ *＆LT;脚本类型=文/ JavaScript的SRC =@ Url.Content（〜/脚本/ jQuery的-1.8.1.js）＆GT;＆LT; / SCRIPT＆GT; * @
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。在（'点击'，'.deleteComment'，函数（）{
警报（'意见'中删除）;
}）; $（'。ShowComments'）。点击（函数（）{
$（'ParentBlock。'）的slideToggle（慢）。
}）; $（'＃AddCommentButton'）。点击（函数（）{
$（'＃comments22'）追加（'＆LT;输入类型=按钮级=deleteCommentVALUE =删除/＆GT;＆LT; BR /＆GT;'）;
$（'＃comments22'）追加（'＆LT;输入类型=按钮级=deleteCommentVALUE =删除/＆GT;＆LT; BR /＆GT;'）;
$（'＃comments22'）追加（'＆LT;输入类型=按钮级=deleteCommentVALUE =删除/＆GT;＆LT; BR /＆GT;'）;
$（'＃comments22'）追加（'＆LT;输入类型=按钮级=deleteCommentVALUE =删除/＆GT;＆LT; BR /＆GT;'）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
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:
<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>
这篇关于处理按钮的点击事件里面添加在DIV标签运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
