追加div标签不能正常工作 [英] Appending a Div tag not working properly
问题描述
我开发MVC 3应用程序，并使用剃刀语法。
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".
当用户负载实体，previously添加评论能显示的页面上有
删除按钮，当该按钮用户点击点击显示味精。
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.
现在，当用户添加一个新的评论，它保存在数据库sucsessfully也出现在网页上
随着删除按钮。
now, when user add a new comment, it saved in DB sucsessfully and also appear on the page along with Delete button.
现在当删除按钮味精wontcome用户点击...
（我追加div标签加载从数据库中新评论）
now when user click on delete button msg wontcome... ( I append the Div tag while loading the new comment from DB)
我想，有关于追加一个问题，意味着previous评论删除按钮
工作得很好，但是当我使用添加按钮添加它不会工作...
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...
下面是code，在DB节省了意见，并在sucsess，它会创建HTML code与按钮DISPLY页面上的数据。
Here is the code, saves comment in DB and in sucsess , it creates HTML Code with button to disply the data on the page.
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#AddCommentButton').click(function ()
{
if (document.getElementById('Comment').value != "")
$.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 = "1" class="deleteComment">Delete</button><br />')
alert(data.Id);
}
});
});
});
</script>
删除按钮
和用户点击我写了这个code。
and user clicks on Delete Button I have written this code.
$(document).ready(function () {
$(".deleteComment").click(function ()
{
alert("Clicked");
});
});
有关previous意见，当上了删除按钮点击了味精来，但是当用户点击新添加的评论的删除按钮，味精不会来......用户点击
For previous comments, when user click on the delete button "Clicked' msg comes but when user clicks on newly added comment's delete button, msg wont come ...
推荐答案
您需要订阅点击中的生动这个删除按钮的事件，因为它的方式动态添加到DOM。你不能只用。点击（）在的document.ready ，因为删除按钮还没有在这个存在阶段。所以要根据您所使用jQuery版本有3种方式：
You need to subscribe to the click event of this delete button in a lively manner since it was added dynamically to the DOM. You cannot just use .click() in your document.ready because the delete button doesn't yet exist at this stage. So depending on the jQuery version that you are using there are 3 ways:
。对（） ，< A HREF =http://api.jquery.com/delegate/相对=nofollow> .delegate（） 或的 .live（） 。
建议的方法是。对（）它支持从1.7 jQuery的启动：
The recommended approach is .on() which is supported starting from jQuery 1.7:
$(document).on('click', '.deleteComment', function() {
alert("Clicked");
});
和你不再需要在包装这个的document.ready 。
And you no longer need to wrap this in a document.ready.
如果您使用的是这里的旧版本是用相同的 .delegate（）（jQuery的1.4.2中引入）：
If you are using an older version here's the same with .delegate() (introduced in jQuery 1.4.2):
$(document).delegate('.deleteComment', 'click', function() {
alert('Clicked');
});
如果你正在使用jQuery的一个更老的版本，那么，你应该升级，如果你不想升级使用 .live（）：
$('.deleteComment').live('click', function() {
alert('Clicked');
});
虽然我在你的code这里有几个其他的言论。
And while I am at your code here are a couple of other remarks.
替换为：
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
与
<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
和同时更换：
url: '/Comment/SaveComments',
与
url: '@Url.Action("SaveComments", "Comment")',
和由作为替代把URL在JavaScript中，你可以直接使用的值，你的 AddCommentButton 的方式。您还没有显示它您的标记我认为它可能是这样的：
And by the way as an alternative to putting the url in your javascript you could directly use the value of your AddCommentButton. You haven't shown it your markup I assume that it might look like this:
@Html.ActionLink("Add a comment", "SaveComments", "Comment", null, new { id = "AddCommentButton" })
而现在，所有剩下的就是悄悄地AJAXify吧：
And now all that's left is to unobtrusively AJAXify it:
$(document).ready(function () {
$('#AddCommentButton').click(function (evt) {
evt.preventDefault();
var comment = $('#Comment').val();
if (comment == '') {
alert('Please enter a comment');
return;
}
$.ajax({
type: 'post',
url: this.href,
data: {
comments : comments,
EType: @Html.Raw(Json.Encode(ViewBag.EType)),
EId: @Html.Raw(Json.Encode(ViewBag.EId))
},
success: function (data) {
// You probably need to embed the comment id as a HTML data-* attribute
// to the button instead of using a hardcoded id="1" value
// which by the way is an invalid value of an id in HTML:
$('p.p12').append(
$('<button/>', {
'class': 'deleteComment',
'html': 'Delete',
'data-id': data.Id
}).after($('<br/>'))
);
}
});
});
});
现在你的删除按钮点击回调里面，你将能够访问该评论的ID被删除：
and now inside your Delete button click callback you will be able to access the id of the comment to be deleted:
$(document).on('click', '.deleteComment', function() {
var commentId = $(this).data('id');
// TODO: delete the comment
});
在ASP.NET MVC应用程序绝对不会硬code的URL。始终使用URL佣工生成它们。这样做的原因是，URL佣工考虑到路由的设置，并在您的应用程序可能运行的虚拟目录。所以，如果以后你决定要改变你的路由的格局，甚至部署IIS应用程序，你将不再需要通过所有网页并更换这些错误很难codeD网址，为您的应用工作。
Absolutely never hardcode urls in an ASP.NET MVC application. Always use url helpers to generate them. The reason for this is that url helpers take into account the routing setup and the virtual directory in which your application might be running. So if later you decide to change the pattern of your routes or even deploy your application in IIS you will no longer need to go through all your pages and replace those wrongly hardcoded urls for your application to work.
这篇关于追加div标签不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
