jquery not working after 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");
        });
});

[Event Delegation](http://learn.jquery.com/events/event-delegation/), Use `$(".commentContainer").on('focus', ".inputcomment",function () { ` instead of `$(".inputcomment").focus(function () {` — Satpal, Apr 23 '14 at 11:36
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Satpal, Apr 23 '14 at 11:39

Ehsan Sajjad · Accepted Answer · 2014-04-23T11:54:47.247

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

score 1 · Answer 2 · answered Apr 23 '14 at 11:37

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 () {

jquery not working after ajax post asp.net mvc4

2 Answers2