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

带有PHP的动态HTML页面，第一次加载时有12个图像，点击事件时有加载更多按钮加载另12个图像

现在，这段代码的想法是减少页面加载时间，所以一切都进行得很顺利，但是我现在为这个html页面中加载的每个图像添加了event onclick，现在我可以在前12个图像上添加新的12个图像，依此类推，并保持每个图像的event仍然运行

这是我使用的代码

php获取前12幅图像

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

html将图像处理为

<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>

包括/int\u imgs/“alt=”产品图像“>

jquery函数在firs图像上加载更多图像

$('#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;
                         }
                });

        });

$（'#加载'）。单击（函数（）{
变量单击时间=0；
如果（单击时间===0）{
var-page=2；
}
单击_time++；
$.ajax({
类型：'POST'，
数据：{pagenum:page}，
url:'Process/getInterImgs'，
成功：功能（数据）{
$（'内部样品'）。附加（数据）；
页码=页码+1；
}
});
});

这个函数获取另外12幅图像，并将结果返回到上面的post调用

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

公共函数getInterImgs（）{ $page=$_POST['pagenum']； $this->load->model（'Discover_model'）； 每页$results\u=12； $start=（$page-1）*$results\u每页； $data['style']=$this->Discover\u model->get\u more\u style（$start）； $styles=$data['styles']； foreach（$style作为$style）{ $loadimgs= img_名称。“”alt=“产品图像”> '; } 打印（$loadimgs）；退出（）； 返回$loadimgs； } 现在我需要知道在将图像附加到HTMLDOM之后会发生什么，因为每个图像的jquery方法对于前12个图像都可以正常工作，对于加载的图像则不起作用，因为已知id的名称与前12个项目相同

有任何帮助，请尝试以下操作：

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

---

所以如果你不理解这个问题，这会给我同样的结果，它告诉了我什么？