成功的ajax调用后,我正在尝试重新初始化猫头鹰轮播。Ajax调用将更改数据,但视图应保持不变。我遇到了视图轮播结构无法重新初始化的问题。我不知道我在哪里犯错了。
Ajax请求
$(document).on('click', '.category_list', function() { var category_id = $(this).attr('data-id'); var _token = $('#_token').val(); var param = 'category_id=' + category_id + '&_token=' + _token; $.ajax({ type: "POST", datatype: "json", url: "/master/sub_category", data: param, success: function(result) { $('#test').html(result); var owl = $(".owl-carousel"); owl.owlCarousel({ items: 4, navigation: true }); } }); });
控制器功能
public function getImg() { $post_data = Request::all(); $sub_img = $this->imgModel->getImgList($post_data); $sub_img_html = ''; foreach ($sub_img ['data'] as $data_img ) { $img = '/img/sub_category/'.$data_img ['img']; $sub_img_html .= '<div class="item">'; $sub_img_html .= '<img src="'.$img.'" />'; $sub_img_html .= '</div>'; } echo $sub_img_html; }
视图
<div id="demo"> <div id="test" class="owl-carousel"> <?php if (!empty($img_category)) { foreach ($img_category as $imgcategory){ ?> <div class="item"> <img src='/img/sub_category/<?= imgcategory['subcategory_img'] ?>'/></div> <?php } } ?> </div> </div>
根据您的代码,我进行更改,请应用此代码,希望此代码能正常工作。
success: function(result) { $('#demo').html('<div id="testing" class="owl-carousel"></div>'); for(var i=0;i<result.length;i++){ $(".owl-carousel").append('<div class="item"><img src="/img/sub_category/'+result[i].subcategory_img+'" /></div>'); }; var owl = $("#testing"); owl.owlCarousel({ items: 4, navigation: true });