jquery fancybox 只显示 ajax 内容的第一行

Posted 2023-05-09

【中文标题】jquery fancybox 只显示 ajax 内容的第一行

【英文标题】：jquery fancybox shows only first line of ajax content

【发布时间】：2020-03-10 12:17:26

【问题描述】：

我正在使用 jquery fancybox 3.5.7。当我像下面这样加载 ajax 内容时，它会返回几行带有链接的内容。问题是弹出窗口只显示第一行。为什么？获取数据的链接：

<a data-fancybox data-type="ajax" data-src="/code/lenker.php?q=Abies%20alba" href="javascript:;" title="Flower" class="ajax">Click for a lightbox </a>

返回的数据（Chrome 检查器中的 XHR 响应）

<div><a class="external" href="http://databank.artsdatabanken.no/FremmedArt2012/N63753" data-featherlight="ajax">fremmedartsvurdering 2012 for edelgran</a></div>
<div><a class="external" href="http://eol.org/pages/1033070" data-featherlight="ajax">edelgran hos Encyclopedia of Life</a></div>
<div><a class="external" href="http://linnaeus.nrm.se/flora/barr/pina/abies/abiealb.html" data-featherlight="ajax">edelgran i Virtuella floran, Sverige</a></div>
<div><a class="external" href="https://artsdatabanken.no/Fab2018/N/152" data-featherlight="ajax">Fremmedartsvurdering 2018 for edelgran</a></div>
<div><a class="external" href="https://artsdatabanken.no/Taxon/Abies%20alba/103793" data-featherlight="ajax">edelgran hos Artsdatabanken</a></div>
<div><a class="external" href="https://artskart.artsdatabanken.no/app/#map/286667,6576955/7/background/NiB/filter/%7B%22TaxonIds%22%3A%5B129966%5D%2C%22AreaIds%22%3A%5B2595%5D%2C%22Months%22%3A%5B%5D%2C%22TaxonGroupIds%22%3A%5B%5D%2C%22IncludeSubTaxonIds%22%3Atrue%2C%22Categories%22%3A%5B%5D%2C%22BasisOfRecords%22%3A%5B%5D%2C%22Behaviors%22%3A%5B%5D%2C%22InstitutionIds%22%3A%5B%5D%2C%22CollectionIds%22%3A%5B%5D%2C%22CatalogNumbers%22%3A%5B%5D%2C%22Img%22%3A%5B%5D%2C%22Found%22%3A%5B%5D%2C%22NotRecovered%22%3A%5B%5D%2C%22Valid%22%3A%5B%5D%2C%22UnsureId%22%3A%5B%5D%2C%22Spontan%22%3A%5B%5D%2C%22Cons%22%3A%5B%5D%2C%22CenterPoints%22%3Afalse%2C%22Geometry%22%3A%22%22%2C%22BoundingBox%22%3A%22%22%2C%22LocationId%22%3A0%2C%22Style%22%3A1%2C%22YearFrom%22%3A0%2C%22YearTo%22%3A0%2C%22CoordinatePrecisionFrom%22%3A0%2C%22CoordinatePrecisionTo%22%3A0%7D " data-featherlight="ajax">edelgran på Artskart i Østfold</a></div>
<div><a class="external" href="https://no.wikipedia.org/wiki/edelgran" data-featherlight="ajax">edelgran på Wikipedia</a></div>
<div><a class="external" href="https://snl.no/edelgran" data-featherlight="ajax">edelgran i Store norske leksikon</a></div>
<div><a class="external" href="https://www.gbif.org/species/2685484" data-featherlight="ajax">GBIF Verdensutbredelse edelgran</a></div>

弹出窗口只显示：

<a class="external" href="http://databank.artsdatabanken.no/FremmedArt2012/N63753" data-featherlight="ajax">fremmedartsvurdering 2012 for edelgran</a>

始终只显示第一行。如果我使用 ajax 到带有硬编码链接的页面，它会显示所有链接。所以当代码生成时会发生一些事情。为什么它不应该显示所有的html？

【问题讨论】：

哇，Janis，我知道这很简单！并不是说您的答案很简单，但我已经使用 jQuery 工作了 10 年，而且从来没有完全这样做过 :-) 非常感谢您指出这一点！

【参考方案1】：

这个想法是，ajax 响应应该返回一个将被视为“主要内容”的元素，因此您应该简单地将所有内容包装在某个 <div 元素中。

【讨论】：

谢谢，如果您有任何想法，我还有另一个问题。我正在使用 DataTables，表中的一个单元格是一个链接，它打开一个带有链接列表的灯箱。如果我在表外有一个具有相同代码的静态链接，它可以正常工作，并且弹出窗口包含所有 html。但是，如果我单击 DataTables 中的链接，灯箱是空的。无内容！我可以在 XHR 流量中看到我仍然得到正确的 html。知道为什么弹出窗口中什么都没有显示吗？我在文档的最底部包含了 fancybox.js。由于链接打开了一个灯箱，脚本应该可以工作吗？

【参考方案2】：

Janis 的解决方案运行良好。请记住在所有元素周围添加一个外部。 我还有一个问题，点击我的 DataTable 中生成的链接只会显示一个空白的幻想框弹出窗口。我通过创建一个隐藏的 DIV 并进行 ajax 调用来解决这个问题，用数据填充 div 然后在 div 上调用 fancybox()。我的 div 是<div id="lenker" style="display:none"></div>。 DataTables中创建的链接是这样的：

<a rel="Hesperis matronalis" href="#" class="show_link" title="Show links for Hesperis matronalis"><i class="fas fa-link fa-lg"></i></a>

然后，当我单击链接时，会获取数据，写入 div，并调用一个花式框弹出窗口。

  $("#example tbody").on('click','.show_link', function(e) 
      var nid = $(this).attr("rel");
    $.get("/code/lenker.php", q: nid,
        function(data)
        $("#lenker").html(data);
    $.fancybox.open( $('#lenker'));
    extlink();
    );
   );