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>

但是我不希望每个 link 都包含

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>

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

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

Answer 1

您是否在 $(document).ready() 上使用灯箱以便加载所有 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>

jQuery Featherlight 的内容来自 api，第二次点击时加载

jQuery Featherlight with content from api, loads on second click

javascript

jquery

json

featherlight.js