在ajax結果中打開colorbox模式窗口的問題

Question

我已經構建了一個AJAX成員搜索，每次更新搜索過濾器時都會更新結果。它工作正常，但我需要能夠從結果中彈出一個colorbox模式窗口，但我無法。

我的猜測是我可以通過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>"; 

我如果需要的話，可以從這兩個文件中發佈完整的代碼，但認爲這至少會讓您瞭解我如何在不佔用大量空間的情況下構建此代碼。關於如何讓colorbox從結果中彈出的想法？

Answer 1

請向我們展示colorbox在您的代碼中的位置？

不知道，我還在想，我知道您的問題.. 認爲你的問題是這樣的： -On頁面加載最初的DOM是準備好了，顏色框被initilized的選擇AJAX調用一塊新頁面有一些DOM元素在colorbox選擇器列表中，但沒有被注意到，因爲它在javascript讀取選擇器後加載到頁面中。

現在

試試這個，因爲這手錶「身體#main」所有，現有的和新的「一[相對=‘收藏夾’]」：

$("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});}); 

這種方式，而不是等待讓插件手錶對於事件，使用.delegate（）觀看事件，並即時執行colorbox。