追加div标签不能正常工作(Appending a Div tag not working prop

我开发MVC 3应用程序和使用剃刀语法。

在这种应用中，我给评论设施。

我已经给该设施添加注释，并将其保存在数据库中。

并且当用户点击删除按钮它显示消息作为“点击”。

当用户负荷实体，先前添加的评论能显示的页面上删除按钮，当该按钮用户点击“点击”显示味精。

现在，当用户添加一个新的评论，它保存在数据库sucsessfully，也出现在网页上删除按钮一起。

现在当上删除按钮味精wontcome用户点击...（我追加div标签同时加载从DB的新评论）

我认为，有一个问题关于追加，意味着先前的评论删除按钮工作做好了，但是当我使用添加按钮添加它不会工作...

下面是代码，数据库中保存注释和sucsess，它与按钮创建的HTML代码，DISPLY页面上的数据。

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

而用户点击删除按钮我写了这个代码。

$(document).ready(function () {
        $(".deleteComment").click(function ()
         {
            alert("Clicked");


        });
    });

对于先前的评论，当删除按钮“被点击”味精来，但是当用户点击新添加的评论的删除按钮，味精不会来用户点击...

Answer 1:

您需要订阅click这个删除按钮的事件生动地因为它是动态添加到DOM。 你不能只用.click()在你document.ready ，因为删除按钮还没有在这个阶段存在。 所以，这取决于您使用jQuery的版本有3种方式：

.on() .delegate()或.live()

建议的方法是.on()这是支持从1.7 jQuery的开始：

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

你不再需要在包装这个document.ready 。

如果您使用的是旧版本，这里是用相同的.delegate() （jQuery的1.4.2中引入）：

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

如果你正在使用jQuery的一个更老的版本，那么，你应该升级，如果你不想升级使用.live()

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

虽然我在你的代码这里有几个其他的言论。

更换：

<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 。 您还没有显示它您的标记我认为它可能是这样的：

@Html.ActionLink("Add a comment", "SaveComments", "Comment", null, new { id = "AddCommentButton" })

而现在，所有剩下的就是悄悄地AJAXify它：

$(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被删除：

$(document).on('click', '.deleteComment', function() {
    var commentId = $(this).data('id');
    // TODO: delete the comment
}); 

绝对不会硬编码在ASP.NET MVC应用程序的URL。 始终使用URL佣工生成它们。 这样做的原因是，网址助手考虑到路由的设置和您的应用程序可能运行的虚拟目录。 所以，如果以后你决定改变路线的模式，甚至部署IIS应用程序，你将不再需要通过所有网页，并取代那些错误地硬编码的网址为您的应用工作。

文章来源: Appending a Div tag not working properly