0

我通过重建它再次提出这个问题......因为我仍然没有任何解决方案......

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

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

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

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

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

在此处输入图像描述

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

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

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

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

    <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 标记中添加运行时时，任何人都可以提供处理按钮单击事件的简单代码。

这是新代码，我已经在页面中添加了您的代码，但它仍然无法正常工作。

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

@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

4 回答 4

1

您打算在页面中包含多少次 jQuery？1 应该足够了。您似乎已将其包含在 3 个不同的地方。<html>此外，如果元素完全错误，您似乎已将脚本放在外面。

只需要包含一项：

<script src="@Url.Content("~/Scripts/jquery-1.8.0.min.js")" type="text/javascript"></script>

另外你应该使用该.on()方法生动地订阅删除按钮的点击事件：

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

最后但并非最不重要的一点是，您似乎在元素runat="server"上使用了该属性。<head>那是 Razor，而不是 WebForms - 忘记那些属性。

所以让我为你清理这段代码，因为它完全是一团糟：

@model IEnumerable<CRMEntities.Comment>
@{ 
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </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>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <!-- or use your own jQuery version locally: -->
    @*<script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.8.1.js")"></script>*@
    <script type="text/javascript">
        $(document).on('click', '.deleteComment', function () {
            alert('comment deleted');
        });

        $('.ShowComments').click(function () {
            $('.ParentBlock').slideToggle('slow');
        });

        $('#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>
</body>
</html>
于 2012-09-25T07:01:30.250 回答
1

当用户单击删除按钮时，您可以显示您的删除消息，如下所示

在我的应用程序中，当用户单击删除按钮链接时，此 div 打开以获取确认消息。

<div id="dialog-confirm" title="Delete Country">
    <p>
        Are you soure you wont to delete this record ?</p>
</div>


<script type="text/javascript">
    $(function () {
        $(".lnkDelete").button();
        $(".lnkDelete").button();
        $("#dialog-confirm").dialog({
            autoOpen: false,
            model: true,
            width: 300,
            resizable: false,
            height: 200
        });

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


            $("#dialog-confirm").dialog({
                buttons: {
                    "Confirm": function () {
                        window.location.href = targeturl;
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
            $("#dialog-confirm").dialog("open");
        });
    });
</script>

在视图中

@foreach (var item in Model)
    {
        <tr>                
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.ID }, new { @Class = "lnkDelete" })                    
            </td>
        </tr>
    }

我想这会对你有所帮助。

于 2012-09-25T07:06:37.263 回答
0

如果您使用的是 1.7 或更高版本的 jQuery，那么您应该使用 .on()

$('body').on('.deleteComment', 'click', function () {
    alert('Clicked');
});
于 2012-09-24T13:11:30.597 回答
0

您正在将事件添加到文档就绪事件中。但是元素不可用，然后附加事件。

您需要确保在创建元素后添加事件......所以在成功回调函数中添加......

否则创建的元素将不会与事件处理程序关联...

   success: function(data) {
    $("p.p12").append('<button type="button" id=' + data.Id + ' class="deleteComment2">Delete</button></div>');

   // Add the event to the Delete button when created...
    $('#' + data.Id).on('click', function() {
        alert('Clicked');
    });
}​
于 2012-09-25T07:02:51.747 回答