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

Question

我正在使用 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？

Answer 1

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

Answer 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();
    });
   });