Question

我有一个代码，使用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以防止与其他可能的库发生冲突。

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

Answer 1

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

Answer 2

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?

Answer 3

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

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

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

3 个答案: