私はこのマークアップを持っています。#popup
モーダル ポップアップとして機能するように CSS でスタイル設定されています
<div id="popup" style="display: none;"><div id="pop-con"></div></div>
<ul>
<li data-uid="1" class="list">One</li>
<li data-uid="2" class="list">Two</li>
<li data-uid="3" class="list">Three</li>
</ul>
今、私は自分のjQueryスクリプトを
$('.list').live('click', function(){
$('#pop-con').html('');
var uid = $(this).data('uid');
$('#popup').show('clip', { direction: 'horizontal' }, 100);
$('#pop-con').load('proc/fb-comment.php?uid='+uid);
});
fb-comment.php
ファイルは次のようなものです
<div id="fb-root"></div>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-comments"
data-href="http://mydomain.com/?uid=<?php echo $_GET['uid']; ?>"
data-num-posts="2"
data-width="450"></div>
問題は、最初にクリックした要素に対してコメント プラグインがレンダリングされたのは 1 回だけです (つまり、リンクを 2 回目にクリックすると、レンダリングに失敗します)。
list-item をクリックするOne
と、コメント ボックスが表示されます。しかし、他のリスト項目をクリックすると、コメント ボックスは表示されません。