Question

我在网站上安装了Wordpress的Fancybox插件。在普通页面中，我会插入Wordpress短代码库或图像，它可以正常工作。

但我有一些页面通过ajax函数加载帖子。

我知道，通常情况下，Fancybox插件会扫描每个图像的页面，然后在每个图像上创建一个属性“rel ='fancybox'。因此，如果页面已经加载，我会添加一些内容AJAX，我不希望插件工作，因为它是用de jQuery（document）.ready语句触发的。

我该如何解决这个问题？我想把str_replace函数放在由AJAX调用触发的PHP函数上，如下所示：

$content = get_the_content();

//这将获得post_content并将其存储在$ content变量

中

$content = apply_filters('the_content', $content);

//这将使wordpress执行字符串$ content

上的短代码

$content = str_replace('<a ', '<a rel="fancybox" ', $content);

//这应该让fancybox出现。

如何解决此问题？ 非常感谢。

Answer 1

这里要考虑很多事情。

此

$content = str_replace('<a ', '<a rel="fancybox" ', $content);

不会触发fancybox但会将<a rel="fancybox标记绑定到fancybox IF（并且只有在这样的自定义脚本存在时）

$("a[rel='fancybox']").fancybox();

但是，您正在动态添加此元素（或使用replace方法添加rel属性），这意味着在加载fancybox插件时它不存在于DOM中

如果您使用的是fancybox v1.3.4或更低版本，则此（这些）版本不会（不）支持动态添加的元素，因此上述任何一个都不会（永远）工作。

作为解决方法，您可以尝试识别父容器并将.on()方法应用为described here。

您可能需要调整脚本以满足您的需求，例如

$("#container").on("focusin", function(){
 $("a[rel='fancybox']").fancybox({ ......

最后注意：fancybox v2.x已经支持现有和动态添加的元素。