0

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

在这个应用程序中，我提供评论功能。

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

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

当用户加载实体时，先前添加的评论会显示在带有删除按钮的页面上，当用户单击该按钮时，会出现“单击”消息。

在此处输入图像描述

现在，当用户添加新评论时，它会成功保存在数据库中，并与删除按钮一起出现在页面上。

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

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

这是代码，将注释保存在 DB 中，并在 succsess 中创建带有按钮的 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");


        });
    });

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

4

1 回答 1

3

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

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

顺便说一句，作为将 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 助手来生成它们。这样做的原因是 url 助手考虑了路由设置和您的应用程序可能运行的虚拟目录。因此，如果稍后您决定更改路由模式，甚至在 IIS 中部署应用程序，您将不再需要遍历所有页面并替换那些错误硬编码的 url 以使应用程序正常工作。

于 2012-09-24T08:42:24.410 回答