Question 69984 in Ajax Question posted in
You can find the official documentation here.

Jquery "On click" OR"unbind" not working with php loop – Jquery ajax

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>
                ";
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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 class="show_more_main" id="show_more_main'.$postID.'" data-url="'.$pathss.'">...</div>';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search