Handling click event of button which added in Div

2019-08-19 07:50发布

站内文章 / JavaScript
11 0 0

问题:

I am putting this question again by reconstructing it....as I still not have any solution...

I am developing MVC 3 application and using razor syntax.

In this application I am giving commenting facility.

I have given the facility to adding a comment and it saved in DB.

and when user clicks on delete button it displays the message as "Clicked".

When user load entity, previously added comments get displayed on page with delete button and when user click on that button the "clicked" msg appears.

now, when user add a new comment, it saved in DB sucsessfully and also appear on the page along with Delete button.

now when user click on delete button msg wontcome... ( I append the Div tag while loading the new comment from DB)

I think , there is a issue regarding append, means previous comments Delete button work well, but when I add button using append it wont works...

Here is the code which is in partial view which add comment in DB and again fetches latest comment back to view to display It.

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

I use below code, when i clicked on the delete button...

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

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

</script>

Now , the summary of a problem is I append div and in that div I add a button and I am trying to get click event of that button but I cant get that event.

Can anyone please give the simple code for handling of button's click event when button get added runtime in the Div tag.

Here is the new code, I have added your code in page, but it still not working.

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

回答1:

How many times do you intend to include jQuery in your page? 1 should be enough. You seem to have included it in a 3 different places. Also you seem to have placed your scripts outside if the <html> element which is completely wrong.

Only one inclusion is necessary:

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

Also you should use the .on() method to subscribe to the click event of the delete button in a lively manner:

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

And last but not least you seem to be using the runat="server" attribute on your <head> element. That's Razor, not WebForms - forget about those attributes.

So let me clean this code for you because it is a complete mess:

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


回答2:

You can show your delete message when user click on delete button like below

In my application when user click on delete button link then this div open for confirmation message .

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

In the view 

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

i think this will help you.



回答3:

If you're using a jQuery version of 1.7 or above then you should use .on()

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


回答4:

You are adding the event in the document Ready event .. But the elements are not available then to attach the events.

You need to make sure you add the event after element is created... So add that in the success callback function ..

Otherwise the created element will not be associated with the event handler...

   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');
    });
}​


标签： javascript asp.net-mvc-3
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~