通常、次のように書くと：
<a id="sta_numberOfIcons" class="icon-user" rel="popover"></a>
そしてjs：
$("a[rel=popover]").each(function(){
$(this).popover({
trigger: 'hover',
placement: 'top',
html: true,
title:"Passenger Info",
content: "content "+$(this).attr('id')
})
.click(function(e) {
e.preventDefault()
});
});
それは機能し、アイコンのポップオーバーを表示できます。しかし、次のコードを記述してアイコンを動的に作成すると、新しく作成されたアイコンのポップオーバーを表示できません。
html 部分:
Stations:
<select name="selectStation" id="selectStation" onchange="sta_callStation(this);"></select>
<a id="sta_numberOfIcons" class="icon-user" rel="popover"></a>
<div id="infoOfPassengers"></div>
<div id="distType"></div>
<div id="distParams"></div>
Stations コンボボックスでは、ページが読み込まれるとオプションが入力されます。通常どおり入力されます。
php から乗客数を取得するための js 関数を作成し、それに応じてアイコンを作成します。
function sta_callStation(sel){
$('#noOfPassengers, #infoOfPassengers, #distType,#distParams').empty();
$('#sta_numberOfIcons').empty();
$.getJSON('Stations.php', function(station){
$.each(station, function(sta_key, sta_value) {
if(sel.value==sta_key)
{
$.each(sta_value.passengers, function(j,passengers)
{
var pas_icon = document.createElement("a");
pas_icon.className ='icon-user';
pas_icon.id='id_'+j;
pas_icon.setAttribute('href', '#');
pas_icon.setAttribute('rel', 'popover');
//alert('id_'+(j));
var empty=document.createElement("a");
empty.appendChild(document.createTextNode(" "));
document.getElementById('sta_numberOfIcons').appendChild(pas_icon);
document.getElementById('sta_numberOfIcons').appendChild(empty);
});
}
});
});
}
コンボボックスの下のページにアイコンが表示されます。試してみましたが、新しく作成したアイコンをタグに挿入する方法がわかりません。新しく作成したアイコンをタグに追加しました。何が問題なのですか?なぜできないのですか?作成したアイコンのポップオーバーを表示しますか?助けてください。