Jquery单击操作对附加的动态内容不起作用

Question

在屏幕截图中，我将div元素作为按钮扩展comments-loaded-more-wrap div元素内的区域。在这个div里面有段落，如果div包含任何文本内容。如果没有段落comments-load-more则不会首先出现。它在我从input元素添加文本后出现。所以我在comments-loaded-more-wrap内附加文字。但追加后我的扩展jquery不起作用。当我刷新页面工作正常。

我想知道如何重新加载元素以继承jquery，还是有办法解决它？

如果没有内容突出显示按钮，则不会首先显示。当我从评论字段添加内容时，它会出现。但是当我点击按钮时，jquery不起作用。如果第一次有那个按钮，那么如果我在评论栏中添加了某些内容，它就会起作用。

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

这是我的数据追加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

  

我想知道如何重新加载元素以继承jquery，还是有办法解决它？

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

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

然后它就无法工作了，因为javascript已经运行了，而且它不会重新运行将click事件绑定到你的就绪后按钮。

相反，这样做。

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

这会将clickevent绑定到您的按钮的父级，因此子级不会绑定一个事件，但子级将触发绑定到父级的事件。

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'  
   };