jQuery 在 Firefox、Safari 中工作，但在 Chrome 中不工作答案

【问题标题】：jQuery working in Firefox, Safari but not in ChromejQuery 在 Firefox、Safari 中工作，但在 Chrome 中不工作
【发布时间】：2012-11-08 10:59:30
【问题描述】：

我用 jquery 编写了一些代码，可以在 firefox、safari 和 ie9 中使用。但铬不喜欢它。 chrome 控制台中没有明显的消息。我正在碰壁，希望有人能有所启发。脚本只是显示/隐藏一些工具提示。有任何想法吗？在这里摆弄，改变的代码仍然没有改变行为。

http://jsfiddle.net/qAfwJ/

$(document).ready(function(){
    //custom toolTip Written by CASherwood but not working in ie9/chrome
        var ShowId;
        var id;
        var contentholder = $(".contentBox");
        var toolTip = $(".info");
        var idHashString = '#info';
        var idString = 'id';

            function showToolTip(name, id){
                  id = name + id;
                  $(id).fadeIn(1000);
            }

            function hideToolTip(name, id){
                  id = name + id;
                  $(id).fadeOut(1000);
            }

        $(toolTip).mouseover(function(){
                ShowId = $(this).attr(idString);
                showToolTip(idHashString, ShowId);
        });

        $(contentholder).mouseleave(function(){
            ShowId = $(this).find('.info').attr(idString);
            hideToolTip(idHashString, ShowId);
        });


});

【问题讨论】：

你能提取一些html并在这里发布吗？或者把它放到一个 jsfiddle 中也许有助于测试。
LOL - this other question 正好相反：P 仅适用于 chrome...也许你们两个应该见面;)
拜托你能建立一个问题的演示，也许在jsFiddle？该问题不包含任何有助于澄清问题的标记
小提琴在 Chrome 中对我来说工作正常。将鼠标悬停在 i 字符上时，我看到了工具提示。我确实看到您正在使用以数字开头的id 属性，该数字仅对 HTMl5 doctype 有效，但这不应导致它在 Chrome 中不起作用。您使用的是哪个版本的 Chrome？我正在使用 24.0.1312.5 dev-m
嗨，我将它作为一个小部件嵌入到学习环境（黑板）中，我认为这是问题所在。对的痛！认为我需要使用 noConflict();

标签： javascript jquery google-chrome

【解决方案1】：

这里有几件事，您正在设置一个变量var toolTip = $(".info");

然后使用同一个变量为其添加一个函数。你在这里做的其实是

$($(".info")).mouseover(

代替

var toolTip = $(".info");
toolTip.mouseover(

你也可以考虑使用

jquery.hover(handlerIn(eventObject) , handlerOut(eventObject)  );

http://api.jquery.com/hover/

【讨论】：

$(<jquery-object>) 与 <jquery-object> 相同，所以这应该不是问题。
其实这样不太对。它创建了 jQuery 对象的克隆，但它们都引用了相同的 DOM 元素。

【解决方案2】：

好的，我在这里注意到的一件事是，您使用 jQuery 选择器将一些元素包装了两次。

var contentholder = $(".contentBox");
$(contentholder).mouseleave(function(){
  ...
});

基本上评估结果是这个 -

$($(".contentBox"))

这看起来不太好，我不太确定它是否会按预期工作。即使是这样，跨浏览器兼容性的问题也可能会发挥作用，我相信这就是您所遇到的。如果您已经捕获了元素并且不只是将选择器存储为字符串，则无需使用 $ 语法再次包装元素。

var contentholder = $(".contentBox");
contentholder.mouseleave(function(){
  ...
});

当你从字符串和变量构造选择器时，你应该以与此类似的方式进行 -

var elementId = 'the_elements_id';
$('#'+elementId).on('click',handler);

【讨论】：

【解决方案3】：

我会从改变开始

        $(toolTip).mouseover(function(){
                ShowId = $(this).attr(idString);
                showToolTip(idHashString, ShowId);
        });

        $(contentholder).mouseleave(function(){
            ShowId = $(this).find('.info').attr(idString);
            hideToolTip(idHashString, ShowId);
        });

到

        toolTip.mouseover(function(){
                ShowId = $(this).attr(idString);
                showToolTip(idHashString, ShowId);
        });

        contentholder.mouseleave(function(){
            ShowId = $(this).find('.info').attr(idString);
            hideToolTip(idHashString, ShowId);
        });

因为您的 toolTip 和 contentholder 变量已经是 jquery 对象。

【讨论】：

【解决方案4】：

我不确定也没有测试过，但是如果您尝试在$(function(){}); 之前或之后移动这两个函数（showToolTip() 和hideToolTip()）怎么办？可能会被视为某种内部函数而不是全局函数，这可能是一回事。

【讨论】：