javascript - Bootstrap 模态不加载图像

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请求的问题成功，您的代码如下:

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

应该可以用!