0

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

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

我在每个 Div 中添加了评论链接。. 当用户单击该评论链接时，它会加载包含用于添加评论的控件组的部分视图。

我正在使用列表来显示记录，当用户单击评论按钮时，我使用部分视图来加载评论控件。

现在的问题是我只能为第一条记录添加评论我不能对其他记录添加评论......

什么问题？

请检查下图...

在此处输入图像描述

这是部分视图中的代码，它在 DB 中添加评论并再次获取最新评论以查看以显示它。

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


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

我使用下面的代码，当我点击删除按钮时......

<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

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

</script>

现在，问题的总结是我附加了 div 并在该 div 中添加了一个按钮，我试图获取该按钮的单击事件，但我无法获取该事件。

当按钮在 Div 标记中添加运行时时，任何人都可以提供处理按钮单击事件的简单代码。

这是 Darin Dimitrov 的更新代码

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

2 回答 2

1

您已订阅 的点击事件 #AddCommentButton。但正如您所知，id 在整个 DOM 中必须是唯一的。你只能有 1 个元素id="AddCommentButton"。所以你应该为你的Add Comment按钮使用一个类选择器：

$('.addComment').click(...);

和你的按钮：

<input type="button" value="Add Comment" class="addComment" />

我也希望你注意到这个答案。显然你没有，因为我仍然在你的视图中看到你硬编码 url 而不是使用帮助程序。

于 2012-09-25T05:25:14.510 回答
1

嗨，你可以像这样得到你的删除事件，它在下面

 $(".lnkDelete").click(function (e) {
            e.preventDefault();
            var targeturl = $(this).attr("href");

 and you can pass that targert url to your delete button like this 

window.location.href = targeturl;

我想这会对你有所帮助....

于 2012-09-25T06:30:06.520 回答