无法从 ajax 结果中的链接打开 colorbox 模式窗口

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

请告诉我们颜色框在您的代码中的位置？

不知道，我仍然认为我知道你的问题..
像这样思考你的问题：
- 在页面加载时，最初 DOM 已准备好，并且为选择器初始化了 colorbox，AJAX 使用 colorbox 选择器列表中的某个 DOM 元素调用页面的新部分，但没有被注意到，因为它是在选择器被 JavaScript 读取。

现在尝试这个，因为它监视所有现有的和新的“a[rel='lightbox']”的“body #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( 监视事件) ），并即时执行颜色框。