php - jquery bpopup.js - bpopup を動的データにアタッチする

Question

検索機能のあるウェブサイトを持っています。ユーザーが検索パラメーターを入力すると、(bpopup.js を介して) ポップアップが表示され、結果へのリンクが表示されます。ユーザーが各リンクをクリックして、その URL からのデータを含む別の iframe をポップアップ表示できるようにしたいと考えています。ユーザーを一度に 5 件の結果に制限する予定です。現在、私の検索は正常に機能し、ポップアップにリンクのリストが表示されます。ただし、各リンクをクリックすると、新しい iframe ではなく、その特定の iframe 内にデータが読み込まれます。複数のiframeを開くことができるようにしたいのですが、bpopupはそれが可能だと言っています。

関連する search.php コードは次のとおりです。

if($searcher->getResultCount() > 0) {
echo('<div><ul>');
    foreach($searcher->getResults() as $result) {
    $newclass="imagen" . $counter;
    $url = '<a id="' .  $newclass . '" href="' . $result['filePath'] . '">Test</a>';
    echo('<li><em>' . $url . '</em></li>');
    $counter++;
    }
echo('</ul></div>');

} そうしないと.....

search.php の一番下に、bpopup をセットアップする場所があります。

$(ドキュメント).on(関数() {

$(function() {
$('#searchResults').bPopup({
    content: 'iframe',
    contentContainer: '.searchResults',
    position: [200,200],
    follow: [false, false],
    opacity: 0,
    scrollBar: 'true'
});
$('#imagen1').bind('click', "a.imagen1",  function (e) {
            e.preventDefault();
            var urltoLoad = $(this).attr("href");
            $('#result1').bPopup({
                content: 'iframe',
                contentContainer: '.resultcontent1',
                follow: [false, false],
                position: [50,200],
                positionStyle: 'fixed',
                closeClass: 'b-close1',
                scrollBar: 'true',
        escClose: 'true',
                loadUrl: urltoLoad
             });
         });....

5 つの結果ごとに 1 つの #imagen が設定されています。

そして最後に、

 <div id = "searchResults"> </div> 
<div id = "result1">
<a class="b-close"></a>
<div class="resultcontent1"></div>
</div>
<div id = "result2">
<a class="b-close"></a>
<div class="resultcontent2"></div>
</div>
<div id = "result3">
<a class="b-close"></a>
<div class="resultcontent3"></div>
</div>