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, Use $(".commentContainer").on('focus', ".inputcomment",function () { instead of $(".inputcomment").focus(function () { — Satpal
– Satpal, Commented Apr 23, 2014 at 11:36
possible duplicate of Event binding on dynamically created elements? — Satpal
– Satpal, Commented Apr 23, 2014 at 11:39

Ehsan Sajjad · Accepted Answer · 2014-04-23 11:54:47Z

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

edited Apr 23, 2014 at 11:54

answered Apr 23, 2014 at 11:37

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sridhar R · Accepted Answer · 2014-04-23 11:37:51Z

1

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

answered Apr 23, 2014 at 11:37

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Collectives™ on Stack Overflow

jquery not working after ajax post asp.net mvc4

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related