jQuery單擊操作不適用於Ajax附加的動態內容

Question

就像在屏幕截圖中一樣，我將div元素用作按鈕來擴展comments-loaded-more-wrap div元素內的區域。 如果該div包含任何文本內容，則在該div內有段落。 如果沒有段落，則首先不會出現comments-load-more div。 在我從輸入元素添加文本后出現。 所以我將文本附加在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'  
   };