Question

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

现在这个代码的想法减少了页面加载时间，所以每件事情都进展顺利，但我已经为这个html页面中加载的每个图像点击了事件，现在我可以在前12个上添加新的12个图像，依此类推保持事件foreach图像仍在运行

这是我使用的代码，

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>

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

        });

此功能可获得另外12张图像，并将结果返回到

上方的帖子

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

现在我需要知道将图像附加到html Dom之后发生了什么，因为每个图像的jquery方法适用于前12个图像，并且不适用于已加载的图像已知id的名称与前12个项目相同< / p>

请帮助

Answer 1

试试这个：

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

将图片附加到html页面上点击加载更多按钮

1 个答案: