Json请求数据和jquery prettyphoto绑定问题

Question

我遇到了 jQuery 的一种情况。特别是它的 prettyPhoto 库和 getJSON 函数。

我有一个加载 HTML 的页面，它调用 jQuery 和 prettyPhoto。有一些内联 JS 会在页面下方发出 JSON 请求：

它应该像下面这样工作：

1) 页面加载，

2) Javascript 代码运行，

3) 脚本运行一个 jQuery JSON 请求，该请求返回并包含 HTML（每个 a-tag 中的 a-tags 和图像），

4) 脚本然后将 JSON 中的 HTML 打印到屏幕上，

5) 用户单击 a-tag/image 并在 prettyPhoto 的 iframe 弹出窗口中打开。

注意 -> 每个 a-tag 都附加了一个 prettyPhoto id（使用 iframe 弹出窗口将图像加载到 prettyPhoto 中）。

问题是图片（a-links）不能用 prettyPhoto 打开，我不知道为什么。没有 JS 错误。

但是，如果我手动将 HTML (a-links/image) 已经存在那里，它确实有效（所以只是从 JSON 请求中加载它们的 HTML 似乎会有所不同）。

似乎在 JSON 请求返回时（带有 HTML）prettyphoto 已经绑定到 a-tags（或缺少 off）。

目前已测试：

尝试将 JSON 请求放入“document.ready”，将 prettyPhoto 放入“window.load”。 JSON 请求也是如此，而当其他所有内容加载时，prettyPhoto 也会绑定 - 失败

尝试使用 jQuery AJAX 而不是 JSON - 失败

特别不需要代码，但逻辑有问题。

Answer 1

听起来来自 JSON（a-links/images）的 HTML 没有足够快地返回（在 'window.load' 运行之前）。

尝试将 prettyPhoto JS 放入成功回调中（即返回数据的位置）。

load_images.json 下方是您执行的 JSON 请求，它返回 HTML（a 链接及其图像）：

$.getJSON("load_html.json", function() {
    //grab HTML data (images/a-links) from json file and print into page
})
.success(function() { 
    //JS code running prettyPhoto inside here. Now will bind to a-links.
});

PrettyPhoto 现在在 JSON 加载后绑定到 A 链接。

希望能帮助在链接之后获得漂亮的照片。

如果失败，请尝试将 prettyPhoto 代码放入在成功回调之后发生的完整回调中。像下面这样：

$.getJSON("load_html.json", function() {
    //grab HTML data (images/a-links) from json file and print into page
})
.success(function() { 
    //nothing
})
.complete(function() {
     //JS code running prettyPhoto inside here. Now will bind to a-links.
});

这样你就给了 prettyPhoto 足够的时间来绑定到为其标记的正确 a 链接。

试试看。