jQuery在使用Chrome的Facebook应用程序中不起作用

时间:2012-06-13 13:56:51

标签: jquery facebook google-chrome facebook-apps

我有一个代码,使用jQuery,检查是否单击了正确的图像,然后根据答案是否正确将图像更改为红色或绿色。之后,它等待2秒并重新加载页面以显示下一个图片对。它可以单独使用它,但是一旦我把它放在facebook应用程序中,它就无法正常工作。

在IE和Firefox中,它会改变点击的颜色,但不会重新加载页面。但是,在chrome中,它甚至不会改变点击的颜色。这可能是iframe的问题吗?当我在iframe中使用jQuery时,是否需要特定的参数?

我的代码摘录如下:

jQuery(document).ready(function(){
   jQuery('img#0').live("click", function(){
        if (jQuery(this).hasClass("correct")){
            jQuery(this).attr('src', "0g.png");
        } else{
            jQuery(this).attr('src', "0r.png");
        }

    });
});

正如您所看到的,我甚至将$更改为jQuery以防止与其他可能的库发生冲突。

我有什么想法可以让它发挥作用吗?

3 个答案:

答案 0 :(得分:3)

当您在Facebook页面或应用程序中运行jquery时,您必须使用https,包括html中的链接到您的脚本文件。

答案 1 :(得分:0)

ID为0的图片是HTML4和XHTML中无效的HTML元素ID。它在HTML5中有效。这可能是您DOCTYPE声明的问题。

如果更改DOCTYPE无法解决问题,您可以委派图片点击事件。

// html
<div id="someElement">
   <img class="correct" />
</div>

// jquery
$("div#someElement").delegate("img", "click", function() {
   var correct = $(this).hasClass("correct");
   $(this).attr('src', (correct ? "0g.png" : "0r.png" ) );
});

jQuery.delegate().live()函数类似,因为它将适用于当前的未来元素。不同之处在于delegate()将事件处理程序应用于父元素(someElement)并监视来自子元素的冒泡事件。 live()注意文档顶部的这些冒泡事件,可能会因性能而变差。关于文档页面的更多信息以及关于这两者之间差异的SO的讨论很多。

以下是ID属性规范的相关链接:

html5 spec
html4 spec
xhtml guidelines
What are valid values for the id attribute in HTML?

答案 2 :(得分:0)

好吧,这可能是有史以来最愚蠢的想法 - 但它对我有用。在查看网页时,JQuery在chrome的网页上加载得很好 - 而不是在Facebook上。当我在fb app中加载chrome时,它失败了。

IE运行良好。我发现我链接到http://而不是https://(记住一切都必须是安全的)。当我将其更改为https://它工作正常。