I am working with Jquery Ajax and php,I am using Ajax in my controller, I have php loop and inside loop i have "showmore button",I have "ShowMore" button and with "Last Comment"(coming from db),So whenever i click on "ShowMore" button...its hide and "New comments" and new "ShowMore" button (HTML) is coming as Ajax Resonse But Problem is whenever i click on first time on "ShowMore" Button then its working and data (New Comments and show more button) is coming as ajax response but if i click on next time on "ShowMore"(which is coming as Ajax response) then nothing works,I tried with following functions

$('.show_more').unbind('click').bind('click', function (e)

with above function "second click" not working means "show more button"(which is coming as ajax response) not working And if tried with following code then multiple times function work/execute

$(document).on('click','.show_more',function()

Here is my code in loop and my script code,Where i am wrong ? How can i solve this ? Thanks in advance.

function fetch()
    {
        $FeedId; (dynamic)
        $FeedData = $this->M_main->GetFeedData(); // getting feed data from database
        foreach($FeedData as $feeds)
            {
                if($feeds['flag']=="feed")
                    {
                        $GetFeedComments = $this->M_main->GetFeedsComment($FeedId);
                        $TotalFeedsComments=$GetFeedComments['TotalRows'];
                        if($TotalFeedsComments>1)
                                {
                                        $Loads='<div class="show_more_main" id="show_more_main'.$postID.'">
                                        <input type="hidden" name="fixs" value="'.$postID.'" id="fixs">
                                        <input type="hidden" name="MinValue" value="'.$postID.'" id="MinValue">
                                        <input type="hidden" name="FeedIdd" value="'.$FeedId.'" id="FeedIdd">
                                        <input type="hidden" name="MaxValue" value="'.$postID.'" id="MaxValue">
                                        <span id='.$postID.' data-val='.$postID.' data-status='.$postID.' class="show_more" title="Load more posts" data-feds='.$FeedId.'>Show more</span>
                                        <span class="loding" style="display: none;"><span class="loding_txt">Loading...</span></span>
                                                            </div>';
                                }
                        
                    }
            }
    $pathss= base_url()."Main/GetFeedCommentsById"; 
             echo "
                <script>
                $('.show_more').unbind().click(function(e) {
                e.preventDefault(); 
                    var ID = $(this).attr('id');
                        var vals=$(this).data('val');
                        var feds=$(this).data('feds');
                        $('.show_more').hide();
                    $.ajax({
                            type:'POST',
                            url:'".$pathss."',
                            data:{id:ID, vals:vals},
                            success:function(html){
                                $('#show_more_main' ID).remove();
                                $('.postList' feds).append(html);
                            }
                        });
                    
                    });
                </script>
                ";

CodePudding user response：

The problem is you are removing the html node on ajax success message, and the event listener goes away.

You should add the listener again to the new node;

<script>
// Assign the event listener to a variable, to reuse it
let myEventListenerFunction = function(e) {
    e.preventDefault(); 
    var ID = $(this).attr('id');
        var vals=$(this).data('val');
        var feds=$(this).data('feds');
        $('.show_more').hide();
    $.ajax({
            type:'POST',
            url:'".$pathss."',
            data:{id:ID, vals:vals},
            success:function(html){
                $('#show_more_main' ID).remove();
                $('.postList' feds).append(html);
                // Add event to a new node
                $('.show_more').unbind().click(myEventListenerFunction);
            }
        });
    
}
$('.show_more').unbind().click(myEventListenerFunction);
</script>

CodePudding user response：

There are some problem with your code but if you just want to make it work as it is the best way in my opinion is to separate the javascript part from the rest. One way to achieve that is to add this script in your page into a separate js file

<script>
$(document).on('click','.show_more',function(e) {
                e.preventDefault(); 
                        var $self = $(this);
                        var ID = $self.attr('id');
                        var vals=$self.data('val');
                        var feds=$self.data('feds');
                        $('.show_more').hide();
                        var url = $self.data('url');
                        
                    $.ajax({
                            type:'POST',
                            url: url,
                            data:{id:ID, vals:vals},
                            success:function(html){
                                $self.remove();
                                $('.postList' feds).append(html);
                            }
                        });
                    
                    });
</script>

And in the php part you have to had one attribute like this

$Loads='<div  id="show_more_main'.$postID.'" data-url="'.$pathss.'">...</div>';