Question

我正在开发MVC 3应用程序并使用razor语法。

在这个应用程序中，我正在发表评论工具。

我已经提供了添加评论的功能，并将其保存在数据库中。

当用户点击删除按钮时，它会将消息显示为“已点击”。

当用户加载实体时，之前添加的注释会显示在页面上删除按钮，当用户点击该按钮时，会出现“点击”的消息。

enter image description here

现在，当用户添加新评论时，它会在数据库中成功保存并显示在页面上以及删除按钮。

现在当用户点击删除按钮时，msg不会... （我在从DB加载新评论时附加Div标签）

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

这是代码，在DB中保存注释，并且在创建时，它使用按钮创建HTML代码以显示页面上的数据。

<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");


        });
    });

对于之前的评论，当用户点击删除按钮“Clicked”时，msg会出现，但是当用户点击新添加的评论的删除按钮时，msg将不会...

Answer 1

您需要以生动的方式订阅此删除按钮的click事件，因为它已动态添加到DOM。您不能在.click()中使用document.ready，因为此阶段尚不存在删除按钮。因此，根据您使用的jQuery版本，有3种方法：

.on()，.delegate()或.live()。

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

$(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")',

顺便说一句，您可以直接使用AddCommentButton的值来替代将网址放入javascript中。你没有向它展示你的标记我认为它可能是这样的：

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

现在剩下的就是不引人注目的AJAX化它：

$(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帮助程序生成它们。原因是url助手会考虑路由设置和运行应用程序的虚拟目录。因此，如果您以后决定更改路由模式甚至在IIS中部署应用程序，则不再需要遍历所有页面并替换那些错误的硬编码URL以使您的应用程序正常工作。

附加Div标签无法正常工作

1 个答案: