jquery在ajax post asp.net mvc4之后无法正常工作

Question

Here my jquery function is not working after the jquery ajax call. here is my code

Ajax call

 <input type="button" value="Comment" class="submitComment" onclick="AddItem(this);" />

and

<script type="text/javascript">
     function AddItem(data) {        
            postData = $(data).parents().find("textarea");
            var input = { "PrdHierKey": postData.parents().find('input[data-attr="ProdKey"]').val(),
                "GeoHierKey": postData.parents().find('input[data-attr="GeoKey"]').val(),
                "Period": postData.parents().find('input[data-attr="Period"]').val(),
                "Comment": postData.val()
               };
            $.ajax({
                url: '@Url.Action("AddComments", "Card")',
                type: "POST",
                data: JSON.stringify(input),
                cache: false,
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    $(".commentContainer").html(result);
                }
            });


        }
</script>

and the jquery function which is not working after this ajax call is here

$(document).ready(function () {
     $(".inputcomment").focus(function () {        
            $(this).css("height", "50px");
            if ($(this).val() == "Add a comment") {
                $(this).val("");
            }
            $(".submitComment").show();
            $(this).addClass("inputActive");
        });
});

Answer 1

try using delegated event, as your html is coming via ajax call after the DOM load:

 $(document).on('focus','.inputcomment',function () {        
            $(this).css("height", "50px");
            if ($(this).val() == "Add a comment") {
                $(this).val("");
            }
            $(".submitComment").show();
            $(this).addClass("inputActive");
        });

or can do this:

$('.commentContainer').on('focus','.inputcomment',function () {        
                $(this).css("height", "50px");
                if ($(this).val() == "Add a comment") {
                    $(this).val("");
                }
                $(".submitComment").show();
                $(this).addClass("inputActive");
            });

Answer 2

Since your element created dynamically to the DOM, the events will not be available for these elements. In this case, event delegation will help you to attach that event.

Try with

$(".commentContainer").on('focus','.inputcomment',function () {

OR

$(document).on('focus','.inputcomment',function () {