javascript - 无法在 jquery 响应中显示 slider

Question

我已经成功地在 View 页面上实现了 slider ，但是在 jquery 响应中我不明白你的 slider 没有移动，我也不知道我哪里做错了。实际上我已经在来自数据库的 jquery 响应中加载了数据。

这是我成功查看 slider 的页面:

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" style="width:640px;">
    <div class="modal-content">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">



  <!-- Wrapper for slides -->
  <div class="carousel-inner" id="slider">
  <?php $count=1; if($inspection_images !=''){ foreach($inspection_images as $img){?>   
    <div class="item <?php if($count==1){ echo 'active'; } ?>">
     <img class="img-responsive" src="<?php echo base_url();?>uploads/inspection/<?php echo $img->attachment_saved_name; ?>" alt="...">
      <div class="carousel-caption">
       <?php echo $img->attachment_name.' ('.$img->column_name.')'; ?>
      </div>
    </div>
  <?php $count++; }} ?> 
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
    </div>
  </div>
</div>

它成功地产生了这个:

现在我想在 jquery 响应中做同样的事情以在 slider 中设置这些数据:

function galleryselectetemplate()
{
    var c = $('#gallery option:selected').val();
    var gt = $('#templategallery option:selected').val();
//  alert(gt);
    $.ajax({
       cache: false,
      dataType:'json',
       type: 'POST',
       url: site_url+'Gallery/inspection_gallery',
       data: {client:c,gt:gt},
       success: function(resp)
       {
         //  alert((JSON.stringify(resp)));
          // var count=1;
           var json_arr = JSON.parse(JSON.stringify(resp));
           <?php $count=1; ?>
           if(json_arr != null)
           {
               <?php $count=1; ?>
               $('#img').empty();
               for(var ind = 0;ind < json_arr.length;ind++)
               {
                /*  $('#img').append('<a href=""><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" class="img-responsive"></img></a>');*///shows fit smaller image

                    $('#img').append('<a onclick="viewImage(\''+json_arr[ind]['attachment_saved_name']+'\')" title="'+json_arr[ind]['attachment_original_name']+'" href="javascript:;"><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" width="300" height="200" class="img-responsive"></img></a>');//showing very larger img and i dont know y it is not getting in viewImage?

            /*      $('#slider').append('<img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img>');*/

                    $('#slider').html('<div class="item <?php if($count==1){ echo 'active'; } ?>"><img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img></div>');

                    <?php $count++; ?>

               }
           }
       }
      });
//  var ins= $("#inspectionid").val();
//  alert(c);
//  alert(gt);
//  alert(ins);
}

但我只得到这个:

， slider 没有移动。知道我在 jquery 中哪里做错了吗？

Answer 1

Ajax 响应后，当您在 slider div 中绑定(bind) HTML 时，您必须调用 $('.carousel').carousel();

function galleryselectetemplate()
{
    var c = $('#gallery option:selected').val();
    var gt = $('#templategallery option:selected').val();
//  alert(gt);
    $.ajax({
       cache: false,
      dataType:'json',
       type: 'POST',
       url: site_url+'Gallery/inspection_gallery',
       data: {client:c,gt:gt},
       success: function(resp)
       {
         //  alert((JSON.stringify(resp)));
          // var count=1;
           var json_arr = JSON.parse(JSON.stringify(resp));
           <?php $count=1; ?>
           if(json_arr != null)
           {
               <?php $count=1; ?>
               $('#img').empty();
               for(var ind = 0;ind < json_arr.length;ind++)
               {
                /*  $('#img').append('<a href=""><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" class="img-responsive"></img></a>');*///shows fit smaller image

                    $('#img').append('<a onclick="viewImage(\''+json_arr[ind]['attachment_saved_name']+'\')" title="'+json_arr[ind]['attachment_original_name']+'" href="javascript:;"><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" width="300" height="200" class="img-responsive"></img></a>');//showing very larger img and i dont know y it is not getting in viewImage?

            /*      $('#slider').append('<img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img>');*/

                    $('#slider').html('<div class="item <?php if($count==1){ echo 'active'; } ?>"><img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img></div>');

                    <?php $count++; ?>

               }
           }

           $('.carousel').carousel();

       }
      });
//  var ins= $("#inspectionid").val();
//  alert(c);
//  alert(gt);
//  alert(ins);
}