CODEWITHSUNDEEP
javascriptasp.net-mvc
user1668543
user1668543

Reputation: 309

Appended Div not working properly

I am developing MVC 3 application and using razor syntax.

In this application I am giving commenting facility.

When user clicks on add comment button it get saved in DB and it also appends in current Div.

Please check image...

This is the image before adding new comment...

enter image description here

This image is after adding new comment...

enter image description here

Now, my problem is when user click on the newly added comment's Delete button I want to show msg - "Delete process start here..." but its now working...

Here is my code...

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



//Button which Saves currently added comment in DB as well display on screen...
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#AddCommentButton').click(function () 

        {     

       // alert("clicked");
            $.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('<div style="background-color:#FAFAFA;">Recently Added... <br /><a href="@Url.Action("Details", "Employee", new { id = "__id__" })'.replace('__id__', data.OwnerID) + '">' + data.OwnerName + '</a>'+ data.cmtDateTime +'<button type="button" id=' + data.Id  + ' class="deleteComment">Delete</button></span><br />' + data.msg + '</div>')


                }

            });
        });
    });
</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>



        <p class="CommentP">
           @Html.DisplayFor(ModelItem => item.CommentText)
        </p>


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







</body>
</html>





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


//   Working code - Deletes the comment from DB and removes hide the current Div
////////////////////////////////////////////////////////

    $(document).ready(function () {
        $(".deleteComment").click(function ()
         {
            alert("Delete process start here...");

         });
    });



</script>

Upvotes: 0

Views: 184

Answers (1)

McGarnagle
McGarnagle

Reputation: 102753

Use the JQuery [on][1] instead of click; the former will handle events dynamically as the document gets modified, while the latter wires up the event once, when you call it.

$("body").on("click", ".deleteComment", function ()
     {
        alert("Delete process start here...");
     });

Upvotes: 1

Related Questions