0

我在我的页面上同时使用 colorbox jQuery 插件和 AJAX 来加载异步页面。

在我使用 AJAX 从 .php 文件中提取某些内容后，该 .php 文件的内容不适用于 colorbox。

$('a.boxed').colorbox({rel: 'Galleria'});
$('a.iframe').colorbox({iframe: true, width: "80%", height: "80%"});

这是我在颜色框的 .js 文件中仅有的两行（我正确导入了插件，因为它适用于未从 AJAX 加载的其他元素）。我想创建一个图像，一旦单击，就会使用以下代码打开一个颜色框 iframe：

<a href="MYURL" class="iframe"><img src="IMGURL"/></a>

当我单击网页上的按钮时，我使用以下代码通过 AJAX 重新加载：

函数 showPage(page) { var xmlhttp = new XMLHttpRequest(); // Creo variabile XMLHttpRequest per il caricamento asincrono con AJAX

xmlhttp.onreadystatechange = function() {
    document.getElementById("post-title").innerHTML = page;
    document.getElementById("post-content").innerHTML = xmlhttp.responseText;
}

xmlhttp.open("GET", page + ".php", true);
xmlhttp.send();

}

我读到我应该使用 live() 方法，但我发现不推荐使用 jQuery，现在有 on() 方法.. 多么混乱！有人可以帮助我吗？

4

1 回答 1

1

试试这个：

function showPage(page) { 
    var xmlhttp = new XMLHttpRequest(); // Creo variabile XMLHttpRequest per il caricamento asincrono con AJAX

    xmlhttp.onreadystatechange = function() {
        document.getElementById("post-title").innerHTML = page;
        document.getElementById("post-content").innerHTML = xmlhttp.responseText;
        $('a.iframe').colorbox({iframe: true, width: "80%", height: "80%"});  // <-- add this line
    }

    xmlhttp.open("GET", page + ".php", true);
    xmlhttp.send();
}

如果在加载新元素之前添加事件处理程序，新元素将不会“接收”事件

于 2012-12-06T17:29:56.337 回答