引导模式不加载图像

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：

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>

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

Answer 1

您的代码似乎有问题，没有 ajax 请求success ，您的代码类似于：

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

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

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

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

此外，如果您希望在每个 ajax 请求更改toggle后显示 model 以show 。

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

它应该工作！