引导模式不加载映像

Question

我有一个由jQuery加载的模态。我从数据库加载数据。所有数据加载正常，但图像 - 它不显示图像。但在控制台中，它是正常编写的。下面是模态触发器：

<a data-toggle="modal"  title="Quick View" href="#" onclick="detailsmodal(<?= $row->id; ?>)"><i class=" ti-zoom-in"></i><span>Quick Shop</span></a>

这是脚本：

function detailsmodal(id) {
var data = {"id" : id};
// send data to store_items/detailsmodal
jQuery.ajax({
url     : '<?= base_url()?>store_items/detailsmodal',
method  : "post",
data    : data,
success : function(data){
jQuery('#details-modal').remove();
jQuery('body').append(data);
jQuery('#details-modal').modal('toggle');
},
error   : function(){
alert("Something went wrong!");
}
});
}

这是细节模态函数：

function detailsmodal() {
$item_id = $this->input->post('id', TRUE);
$query = $this->get_where($item_id);
foreach ($query->result() as $item
$big_pic  = $item->big_pic;
$data['big_pic_path'] = base_url()."big_pics/".$big_pic;
}
$this->load->view('detailsmodal', $data);
}

这是模态：

<div class="modal fade" id="details-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
class="ti-close" aria-hidden="true"></span></button>
</div>
<div class="modal-body">
<div class="row no-gutters">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="quickview-slider-active owl-carousel">
<img src="<?= $big_pic_path ?>" alt="">
<img src="<?= $big_pic_path ?>" alt="">
</div>
</div>
</div>
</div>
</div>
</div>

我剪掉了代码。我不知道我应该怎么做。即使我使用静态路径更改图像路径，图像也不会显示在模态中 - 不是从数据库中获取的。

Answer 1

你的代码似乎有问题，没有ajax请求success，你有这样的代码：

jQuery('#details-modal').remove();
jQuery('body').append(data);
jQuery('#details-modal').modal('toggle');

问题是当您从 DOM 中删除元素或在加载的页面中更改 DOM 中的元素时。它不能直接引用选择器。因为每个选择器都是在加载 DOM 时记录的，而动态更改/放置时不会记录任何选择器。

SO 在这种情况下，您需要引用未更改的父元素，然后在其中找到所需的元素。 所以你的代码应该是这样的：

jQuery('#details-modal').remove();
jQuery('body').append(data);
jQuery('body').find('#details-modal').modal('toggle');

此外，如果您希望在每个ajax请求后显示模型，请将toggle更改为show。

jQuery('body').find('#details-modal').modal('show');

它应该有效！