jQuery Featherlightからのコンテンツと、2番目のクリックで読み込まれる

Question

Lightboxのjson文字列からコンテンツを書き込む関数を呼び出しています。私は

<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> 

でページ上のターゲットのdivを作成しようとした

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

を格納するためのすべてのリンクをたくないしかし、私は私の機能の働きを持っていると私は

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

次を使用するときにライトボックスを移入します

しかし、これを初めて使用するときは、リンクをクリックするとライトボックスが空になります。

テンプレートをJavaScriptで設定し、クリック時に動的に呼び出すことはできますか？

Answer 1

$(document).ready()にligthboxを使用していますので、すべての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>