Jquery click action doesn't work to ajax appended dynamic content

Question

Like in the screenshot I have div element working as button to expand area inside comments-loaded-more-wrap div element. Inside this div there are paragraphs if that div contains any text content. If there are no paragraphs comments-load-more div don't appear at first. It appears after I add text from input element. So I'm appending texts inside comments-loaded-more-wrap. but after append my expand jquery doesn't work. When I refresh the page its working fine.

I want to know how to reload the element to inherit jquery or is there any way to solve it?

If there is not content highlighted button don't appear at first. It comes when I add something from comment field. But when I click button the jquery doesn't work. If there are more that button is there at first time and it's working if I add something from comment field.

Here is the graphical view of my button:

here is my data append ajax:

//get comment input box id by its name
    var elements = document.getElementsByName( 'comment_input' );

    //on enter key press
    $(elements).each(function(){
        var cmt_id = $(this).attr('id');
        var resp = cmt_id.split("_");

        $('#comment_post_'+resp[2]).on('click', function(event) {

            var comment = $('#'+cmt_id).text();
            var form_data = {
                comment_input : comment,
                post_Id : resp[2],
                ajax : '1'  
            };

            $.ajax({
                url: "comment/post_comment/",
                type: 'POST',
                async : true,
                dataType:"json",
                data: form_data,
                success: function(data) {
                    $('#'+cmt_id).text('');
                    var latest_comment = data;
                    print_latest_comment(latest_comment);
                }
            });
        });
    });


function print_latest_comment(data){    
        $ght = $('#post_comment_id_'+ data.post_Id + ' .mCSB_container').children().length;
        if($ght==0){
            $('#post_comment_id_'+ data.post_Id + ' #panel1').append('<div class="comments-load-more" id="more-load-'+ data.post_Id +'">'+
                        '<span class="load-more-comments-count"><span class="new_cmt_count_'+ data.post_Id +'"></span></span>'+
                    '</div>');
            $( '#post_comment_id_'+ data.post_Id + ' .mCSB_container'  ).append('<div class="post-meta-single-comment" name="comment-field" id="comment_'+ data.comment_id +'">'+
                    '<div class="post-exp-top-meta-left">'+
                        '<div class="post-exp-top-meta-left-profile-picture">'+
                            '<a href="user?id='+ data.user_Id +'" ><img src="uploads/'+ data.pro_image.name + data.pro_image.ext +'"/></a>'+
                        '</div>'+
                        '<div class="post-exp-top-meta-left-profile-info">'+
                            '<div class="post-exp-top-meta-left-profile-name">'+
                                '<a href="user?id='+ data.user_Id +'" >'+ data.user_details.full_name +'</a>'+
                            '</div>'+
                            '<div class="post-exp-top-meta-left-profile-modes">'+
                                '<ul>'+
                                    '<li><div class="time"><abbr class="timeago" title="'+ data.comment_datetime +'">less than a minute ago</abbr></div></li>'+
                                    '<li class="flag"></li>'+
                                '</ul>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                    '<div class="post-meta-single-comment-vote">'+
                        '<a class="comment-edit_'+ data.comment_id +'" title="Edit Comment" id="comment-edit">Edit</a>'+
                        '<i class="fa fa-times fa-2 close-comment" style="display: none;" title="Remove Comment" id="delete_comment_'+ data.comment_id +'"></i>'+
                        '<div class="comment-count">6</div>'+
                        '<div class="comment-icon"></div>'+
                    '</div>'+
                    '<div class="clearfix"></div>'+
                    '<div class="comment-content comment_content_'+ data.comment_id +'">'+
                        '<span class="comment-content-alone_'+ data.comment_id +'">'+ data.content +'</span>'+
                        '<input type="text" id="edit_comment_'+ data.comment_id +'" name="cmt_edit_input" style="display:none; padding:5px; height: 30px;" value="'+ data.content +'" spellcheck="true" />'+
                    '</div>'+
                '</div>'
            );
        }
}  // function end 

Answer 1

I want to know how to reload the element to inherit jquery or is there any way to solve it?

If you add a button after pageload

$('#myNewButton').on('click', function....

Then it wont work, as the javascript has run, and it's not going to rerun to bind the click event to your post-ready button.

Instead, do this.

$('#myContainerThatExistsInSourceCode').on('click', '#myNewButton', function()....

This binds the clickevent to the parent, of your button, so the children wont have an event bound to it, but the child will trigger the event bound to the parent.

Answer 2

   $('body').on('click', '#comment_post_'+resp[2], function(event) {
        var comment = $('#'+cmt_id).text();
        var form_data = {
            comment_input : comment,
            post_Id : resp[2],
            ajax : '1'  
   };