選択入力が変更されると、3 つのポップオーバーが表示/変更される必要があります。これらのポップオーバーのうち 2 つは正しく機能します。ただし、3 番目は、要素が含まれるコンテナ div の上部に表示されます。
<div id='tab2'>
<div id='leftcol'>
<label>for select</label>
<select>...</select>
<label>for select</label>
<select>...</select>
<div id="casestrengthpop" class="popholder" rel="popover" data-content="" data-html='true' data-placement='bottom'></div>
</div>
</div>
これらはどちらも前述の選択ではありません。これは、機能していないポップオーバーを示しています。
$.post(url, function(json){
if (json != '[]'){
popdata = JSON.parse(json);
if(popdata.aol_info != ''){ $('#subaolpop').attr('data-content', popdata.aol_info).popover('show');}
if(popdata.asset_info != ''){ $('#subaolassetpop').attr('data-content', popdata.asset_info).popover('show');}
if(popdata.very_weak_case != ''){
var strStrength = '<b>Very Weak Case:</b> '+popdata.very_weak_case;
strStrength += '<br /><b>Weak Case:</b> '+popdata.weak_case;
...
$('#casestrengthpop').attr('data-content', strStrength).popover('show');
}
}else{
hideallpops();
console.log("No Popover data available");
}
});
これはすべて正しいデータを作成し、ポップオーバーが表示されますが、「casestrengthpop」は独自の div ではなく、div「leftcol」の上部に表示されます。
leftcol の高さを確実にオーバーフローしないように、テキストの量を減らしてみました。
このポップオーバーと他の 2 つの違いは、その場所だけです。それらは別の 'tab' div 内にあり、その表示は 'block' に設定され、この 'tab2' は 'none' に設定されています。
これは問題を引き起こしますか?なぜそれが必要なのかわかりませんか?