Javascript Jquery单击操作没有'；不适合添加动态内容

就像在截图中一样，我使用div元素作为按钮来扩展

注释中的区域，加载更多wrap

div元素。如果该div包含任何文本内容，则在该div中有段落。如果没有段落

注释，则加载更多的
div不会首先出现。它出现在我从输入元素添加文本之后。因此，我在
注释中添加了文本，并加载了更多的wrap
。但是在追加之后，我的expand jquery就不起作用了。当我刷新页面时，它工作正常

我想知道如何重新加载元素以继承jquery，或者有什么方法可以解决它


若并没有突出显示的内容，那个么按钮一开始不会出现。当我从“注释”字段中添加某些内容时，它就会出现。但当我单击按钮时，jquery不起作用。若有更多，那个按钮在第一时间就在那个里，若我从评论栏中添加了一些东西，那个么它就起作用了

以下是我的按钮的图形视图：


以下是我的数据：

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

//通过名称获取注释输入框id
var elements=document.getElementsByName（'comment_input'）；
//按回车键
$（元素）。每个（函数（）{
var cmt_id=$（this.attr（'id'）；
var resp=cmt_id.分割（“”）；
$（'click'，comment.'u post.'+resp[2]）。关于（'click'，函数（事件）{
var comment=$（'#'+cmt_id）.text（）；
变量形式_数据={
注释输入：注释，
post_Id:resp[2]，
阿贾克斯：“1”
};
$.ajax({
url:“评论/发表评论/”，
键入：“POST”，
async:true，
数据类型：“json”，
数据：表格数据，
成功：功能（数据）{
$（“#”+cmt_id）.text（“”）；
var最新注释=数据；
打印最新评论（最新评论）；
}
});
});
});
函数打印最新注释（数据）{
$ght=$（'#post_comment_id.'+data.post_id+'.mCSB_container'）.children（）.length；
如果（$ght==0）{
$（“#post#u comment_id”+data.post_id+“#panel1”）。追加（“”+
''+
'');
$（'#post_comment_id'+data.post_id+'.mCSB_container'）。追加（''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
“
”+
“不到一分钟前”+
“
”+
“
”+
''+
''+
''+
''+
“编辑”+
''+
'6'+
''+
''+
''+
''+
''+data.content+''+
''+
''+
''
);
}
}//函数结束

我想知道如何重新加载元素以继承jquery，或者有什么方法可以解决它

如果在页面加载后添加按钮

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

然后它就不能工作了，因为javascript已经运行了，并且它不会重新运行以将click事件绑定到post ready按钮

相反，这样做

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

这会将clickevent绑定到按钮的父级，因此子级不会绑定事件，但子级会触发绑定到父级的事件。
这里没有AJAX，没有单击（{function（）。这就是一切吗？成功数据中返回了什么？哪个元素的单击事件不起作用？@DanWhite我已经更新了ajax代码并添加了我的按钮的图形视图。@Nishan哪里是不起作用的按钮单击事件？您添加了问题吗？那么我需要向附加的元素添加一个新类吗？我使用的是相同的类添加到附加的元素，如页面加载上的元素。我只是回答如何在页面加载后添加类似“click”的事件。问题是，在javascript文件已执行且所有事件绑定已完成后，进一步动态添加的元素将不会将这些事件绑定到它们。因此，如果绑定click ev对于动态添加元素的容器，如我在回答中所示，你可以绕过这个问题。你应该解释为什么OP必须在这里使用事件委派，或者更好的是将其标记为与之前关于此的任何问题的重复：）如果我知道它是如何工作的，我会解释。我只知道它是如何工作的。
$('#myContainerThatExistsInSourceCode').on('click', '#myNewButton', function()....