javascript - jQuery Featherlight 包含来自 api 的内容，第二次单击时加载

Question

我正在调用一个函数来将 json 字符串中的内容写入灯箱中。当我使用以下内容时，我的功能正在工作并填充灯箱

<a data-featherlight="<div id='dataplan_list_container'><table id='dataplan_list'></table></div>" onclick="dataPlanOutput('FR');" data-target="data_plan">France</a>

但是我不希望每个链接都包含

data-featherlight="<div id='dataplan_list_container'><table id='dataplan_list'></table></div>"

我尝试使用

在页面上创建目标 div

<a data-featherlight="#dataplan_list_container" onclick="dataPlanOutput('FR');" data-target="data_plan">France</a>
<div id='dataplan_list_container'><table id='dataplan_list'></table></div>

但是当我第一次使用它时，我单击链接，灯箱加载为空。

我可以在 JavaScript 中设置模板并在点击时动态调用它吗？

Answer 1

你在$(document).ready()上使用lightbox吗？那么所有 DOM 内容都已加载吗？如果没有，请考虑使用它。

您也可以manually bind所需内容的所有链接:

function dataPlanOutput(loc) {}

$('a.fl').featherlight({
    targetAttr: 'href'
});

body>#dataplan_list_container {
  display:none
}
#dataplan_list_container {
  width: 200px;
  height: 100px;
}
#dataplan_list {
  margin: 10px;
  width: 180px;
  height: 90px;
  background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.6.1/release/featherlight.min.js"></script>
<link type="text/css" rel="stylesheet" href="//cdn.rawgit.com/noelboss/featherlight/1.6.1/release/featherlight.min.css" />


<a class="fl" href="#dataplan_list_container" onclick="dataPlanOutput('FR');" data-target="data_plan">France</a><br>
<a class="fl" href="#dataplan_list_container" onclick="dataPlanOutput('RU');" data-target="data_plan">Russia</a><br>
<div id='dataplan_list_container'><table id='dataplan_list'></table></div>