尝试使用 jquery 使模态数据动态化

Question

我正在为一个电子商务项目开发快速浏览。到目前为止，我已经完成了以下工作：

function quickView(){
    $('.btn-quick-view').on('click', function(){
    let id = $(this).attr('value');
    let url = '{{ route("quick", ":data") }}';
    url = url.replace(":data", id);
    $.ajax({
        method: "GET",
        url: url,
        dataType: 'json',
        success(response){
            let html = "<div class='modal-dialog modal-dialog-centered' role='document'><div class='modal-content'><span class='modal-close' data-dismiss='modal'><i class='icon-cross2'></i></span><article class='ps-product--detail ps-product--fullwidth ps-product--quickview'><div class='ps-product__header'><div class='ps-product__thumbnail' data-vertical='false'><div class='ps-product__images' data-arrow='true'>";
            $.each(response.images, function(key, value){
            html += "<div class='item'><img src='"+value.image+"'></div>";
            });
            html += "</div></div><div class='ps-product__info'><h1>"+response.name+"</h1><div class='ps-product__meta'><p>Brand:<a href='shop-default.html'>Sony</a></p><div class='ps-product__rating'><select class='ps-rating' data-read-only='true'><option value='1'>1</option><option value='1'>2</option><option value='1'>3</option><option value='1'>4</option><option value='2'>5</option></select><span>(1 review)</span></div></div><h4 class='ps-product__price'>.78 – .99</h4><div class='ps-product__desc'><p>Sold By:<a href='shop-default.html'><strong> Go Pro</strong></a></p>description</div><div class='ps-product__shopping'><a class='ps-btn ps-btn--black' href='#'>Add to cart</a><a class='ps-btn' href='#'>Buy Now</a><div class='ps-product__actions'><a href='#'><i class='icon-heart'></i></a><a href='#'><i class='icon-chart-bars'></i></a></div></div></div></div></article></div></div>";
            $('#product-quickview').html(html);
            $.getScript('/frontend/js/jquery-1.12.4.min.js');
        },
        error: function(response){
            toastr.error('Something went wrong!');
        }
    });
    })
}
quickView();

由于此模型使用 slick 显示产品图片，我希望 jquery 能够正常工作。我试图用 $.getScript('/frontend/js/jquery-1.12.4.min.js'); 加载 jquery 但它没有用。我该怎么做才能让这个模型动态工作？

Answer 1

function quickView(){
$('.btn-quick-view').on('click', function(){
let id = $(this).attr('value');
let url = '{{ route("quick", ":data") }}';
url = url.replace(":data", id);
$.ajax({
method: "GET",
url: url,
dataType: 'json',
success(response){
let html = "<div class='modal-dialog modal-dialog-centered' role='document'>
  <div class='modal-content'><span class='modal-close' data-dismiss='modal'><i class='icon-cross2'></i></span>
    <article class='ps-product--detail ps-product--fullwidth ps-product--quickview'>
      <div class='ps-product__header'>
        <div class='ps-product__thumbnail' data-vertical='false'>
          <div class='ps-product__images' data-arrow='true'>";
            $.each(response.images, function(key, value){
            html += "<div class='item'><img src='"+value.image+"'></div>";
            });
            html += "</div>
        </div>
        <div class='ps-product__info'>
          <h1>"+response.name+"</h1>
          <div class='ps-product__meta'>
            <p>Brand:<a href='shop-default.html'>Sony</a></p>
            <div class='ps-product__rating'><select class='ps-rating' data-read-only='true'>
                <option value='1'>1</option>
                <option value='1'>2</option>
                <option value='1'>3</option>
                <option value='1'>4</option>
                <option value='2'>5</option>
              </select><span>(1 review)</span></div>
          </div>
          <h4 class='ps-product__price'>.78 – .99</h4>
          <div class='ps-product__desc'>
            <p>Sold By:<a href='shop-default.html'><strong> Go Pro</strong></a></p>description
          </div>
          <div class='ps-product__shopping'><a class='ps-btn ps-btn--black' href='#'>Add to cart</a><a class='ps-btn' href='#'>Buy Now</a>
            <div class='ps-product__actions'><a href='#'><i class='icon-heart'></i></a><a href='#'><i class='icon-chart-bars'></i></a></div>
          </div>
        </div>
      </div>
    </article>
  </div>
</div>";
$('#product-quickview').html(html);
//initialize your slick lib
$('.product-images').slick();
$.getScript('/frontend/js/jquery-1.12.4.min.js');
},
error: function(response){
toastr.error('Something went wrong!');
}
});
})
}
quickView();

尝试使用 jquery 使模态数据动态化

Trying to make modal data dynamic with jquery

javascript

ajax

jquery

laravel

bootstrap-modal