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

Posted 2023-03-14

【中文标题】尝试使用 jquery 使模态数据动态化

【英文标题】：Trying to make modal data dynamic with jquery

【发布时间】：2020-11-15 01:18:20

【问题描述】：

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

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'>$36.78 – $56.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，但它没有用。我该怎么做才能让这个模型动态工作？

【问题讨论】：

您的意思是您不能在模板文件中添加/包含 jquery？你也可以试试cdn链接。

@PharsaThapa jquery 被正常包含，但在这里我想在我的 ajax 调用之后重新加载 jquery。

但是你甚至在调用 ajax 之前就在处理 jQuery 代码。我不明白，加载已经加载的同一个库的目的是什么。

@PharsaThapa 我的 jquery 可以工作，但由于我通过 ajax 放置 div，我希望像 slick 这样的插件通过 ajax 在 div 位置上工作。

您是否尝试过使用 cdn 路径而不是本地文件？

【参考方案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'>$36.78 – $56.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();