单击加载更多按钮将图像附加到html页面

Question

Dynamic HTML page with PHP that has 12 images in first load and theres load more button to load another 12 image on click event,

Now the idea of this code to reduce page load time, So every things is going well but i have event onclick for each image loaded in this html page now how i can append new 12 images over the first 12 and so on and keep the event foreach image still running

here's the code i use ,

php to get first 12 images

$results_per_page = 12;
$page = 1;
$start = ($page-1)*12;
$data['styles'] = $this->Discover_model->get_more_styles($start); 

html handling images as

<div class="product-list grid column3-4-wrap" id="interiors_samples" >
                        <?php if($styles):?>
                        <?php foreach ($styles as $style) {?>
                        <div class="img_card col">
                                    <div class="sampleFind">
                                        <img class = "Int_img"  id="<?php echo $style->id?>" src="<?php echo base_url();?>include/int_imgs/ <?php echo $style->img_name;?>" alt="product-image">
                                    </div>
                        </div>
                        <?php }?>
                        <?php endif;?>
                            </div>

jquery function to load more images over firs image

$('#load').click(function(){
var click_time = 0;
                 if(click_time === 0){
                     var page = 2;
                    }
                 click_time++;

                 $.ajax({
                    type:'POST',
                    data:{pagenum:page},
                   url:'<?php  echo base_url(); ?>Process/getInterImgs',
                    success:function(data) {
                        $('#interiors_samples').append(data);
                        page = page + 1;
                         }
                });

        });

And this function get another 12 of images and return result to post call above

public function getInterImgs() {

        $page = $_POST['pagenum'];
        $this->load->model('Discover_model');
        $results_per_page = 12;
        $start = ($page-1)*$results_per_page;
        $data['styles'] = $this->Discover_model->get_more_styles($start);

        $styles = $data['styles'];
        foreach ($styles as $style ){

            $loadimgs = '<div class="img_card col">
                                    <div class="sampleFind">
                                        <img class = "Int_img"  id="'.$style->id.'" src="'.base_url().'include/int_imgs/ '.$style->img_name.'" alt="product-image">
                                    </div>
                        </div>';
        }
        print_r($loadimgs);exit();
        return  $loadimgs;
    }

Now i need to know what is happened after append images to html Dom because the jquery method for each image works fine for first 12 images and doesn't work for loaded image known the id's name is the same with first 12 item

Any help please

Answer 1

Try this :

$(document).on("click", "#load", function () {
    // your code
})