ajaxの結果のリンクからのカラーボックスモーダルウィンドウの開き方

Question

検索フィルターが更新されるたびに結果を更新するAJAXメンバー検索を作成しました。それはうまく動作しますが、私は結果内からカラーボックスのモーダルウィンドウをポップすることができなくてはなりません。

私の推測では、jQueryを使ってDOMを更新することができますが、何を使うべきかはわかりません。

すべての特定のコードを指定せずに、メインファイルに検索フィルタとスクリプトを作成し、その結果をセカンダリsearch.phpファイルに投稿します。結果の配列をajax divの親ページにポップします。与えられた各結果には、その人物を友人として追加する新しいモーダルウィンドウを開くリンクがあります。

ここではメインの親ページからAjaxのスクリプトのビットがあります：

<script language="javascript" type="text/javascript"> 
<!-- 
//Browser Support Code 
function ajaxFunction(sel) 
{ 

var ajaxRequest; // The variable that makes Ajax possible! 

try{ 
    // Opera 8.0+, Firefox, Safari 
    ajaxRequest = new XMLHttpRequest(); 
} catch (e){ 
    // Internet Explorer Browsers 
    try{ 
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
     try{ 
      ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch (e){ 
      // Something went wrong 
      alert("Your browser broke!"); 
      return false; 
     } 
    } 
} 
// Create a function that will receive data sent from the server 
ajaxRequest.onreadystatechange = function(){ 
    if(ajaxRequest.readyState == 4){ 
     var ajaxDisplay = document.getElementById('ajaxDiv'); 
     ajaxDisplay.innerHTML = ajaxRequest.responseText; 
    } 
} 

if (document.getElementById('ac18').checked) { 
var sex = document.getElementById('ac18').value; } 
if (document.getElementById('ac19').checked) { 
var sex = document.getElementById('ac19').value; } 
if (document.getElementById('ac20').checked) { 
var sex = document.getElementById('ac20').value; } 

var cb_activities = document.getElementById('ac22').value; 

var cb_interests = document.getElementById('ac24').value; 

var cb_music = document.getElementById('ac26').value; 

var cb_books = document.getElementById('ac28').value; 

var cb_movies = document.getElementById('ac30').value; 

var cb_tv = document.getElementById('ac32').value; 

var age = document.getElementById('age').value; 
var minage = document.getElementById('minage').value; 
var maxrec = document.getElementById('maxrec').value; 
var minrec = document.getElementById('minrec').value; 
var vcountry = document.getElementById('country').value; 
var vmilesfrom = document.getElementById('milesfrom').value; 
var vstate = document.getElementById('state').value; 
var vcity = document.getElementById('city').value; 
var queryString = "?sex=" + sex + "&age=" + age + "&minage=" + minage + "&maxrec=" + maxrec + "&minrec=" + minrec + "&vcountry=" + vcountry + "&vmilesfrom=" + vmilesfrom + "&vstate=" + vstate + "&vcity=" + vcity + "&cb_activities=" + cb_activities + "&cb_interests=" + cb_interests + "&cb_music=" + cb_music + "&cb_books=" + cb_books + "&cb_movies=" + cb_movies + "&cb_tv=" + cb_tv; 
ajaxRequest.open("GET", "/components/com_cbajaxsearch/search.php" + queryString, true); 
ajaxRequest.send(null); 
} 
//--> 
</script> 

そして、ここでは結果を構築search.phpページからコードのビットは次のとおりです。

echo '<tr><td class="resultcell">'; 
$display_string .= "<div class='memberresults' style='$spanstyle;'>  <center>$photo<br /><span class='memsearchusername'>$username</span><br /><span class='memsearchaddf'><a href='index.php?option=com_comprofiler&Itemid=2&act=connections&task=addConnection&connectionid=$id'></a></span>$afcolorbox<!-- $prolink --></center></div>"; 
echo '</tr></td>'; 
} 

if ($num_rows == 0) { 
echo '<div class="resultnum"><img class="cbasnoresults" src="components/com_cbajaxsearch/images/nomatches.png" alt="No Matches" title="No Matches" /></div>'; 
} 
else { 
echo ''; 
} 
echo $display_string; 
$display_string .= "</table>"; 

私は私は必要があれば、両方のファイルから完全なコードを投稿できますが、これは少なくとも私がどのようにスペースのトンを取らずにこれを構築しているかのアイデアを与えるだろうと思った。カラーボックスを結果内からポップする方法に関するアイデア？

Answer 1

カラーボックスがあなたのコードのどこにあるか教えてください。

知らず、私はまだ私はあなたの問題を知っていると思う...このような問題の 思う： -Onページの読み込み最初にDOMの準備ができて、そしてカラーボックスは、AJAXがページの新しい作品を呼び出し、セレクタためinitilizedされますいくつかのDOM要素はカラーボックスセレクタリストにありますが、セレクタがjavascriptによって読み込まれた後にページに読み込まれたために気付かれません。この方法

$("body #main").delegate("a[rel='lightbox']", "click", function (event) { 
        event.preventDefault(); 
        $.colorbox({href: $(this).attr("href"), 
          transition: "fade", 
          innerHeight: '515px', 
          innerWidth: '579px', 
          overlayClose: true, 
          iframe: true, 
          opacity: 0.3});}); 

の代わりに、プラグインの時計をさせるのを待っている：

今、それはすべてのための「身体#main」、既存および新規の「[RELを= 『をライトボックスを』]」時計として、これを試してくださいイベントの場合、.delegate（）でイベントを監視し、その場でカラーボックスを実行します。