Question

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

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

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

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

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

当我点击网页上的一个按钮时，我使用以下代码重新加载AJAX：

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;
}

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

}

我读到我应该使用live（）方法，但是我发现jQuery已被弃用，现在有on（）方法..这有多么混乱！有人能帮助我吗？

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

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

使用AJAX提取数据后重新加载jQuery Colorbox

1 个答案: