jQuery适用于Firefox，Safari，但不适用于Chrome

Question

I have written some code with jquery works in firefox, safari and ie9. But chrome does not like it. No obvious msgs in chrome console coming up. I am hitting a wall hopefully someone can shed some light. Script just show/hides some tooltips. Any ideas? fiddle here, changed code still no change to behaviour.

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);
        });


});

Answer 1

There are a few things here, You are setting a variable var toolTip = $(".info");

And then using this same variable to add a function to it. What you are doing here is actually

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

Instead of

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

Also you might consider using

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

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

Answer 2

Ok one thing I'm noticing here is that you are wrapping some elements twice with the jQuery selector.

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

Basically what evaluates to is this -

$($(".contentBox")) 

That doesn't look too good and I'm not too sure if it would work as expected. Even if it does, the issues of cross browser compatibility might come into play and I believe this is what you are experiencing. If you have already captured the element and are not just storing the selectors as strings, then there is no need to wrap the element again with the $ syntax.

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

When you are constructing selectors from strings and variables, you should do so in a similar way to this -

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

Answer 3

I'd start by changing

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

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

to

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

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

since your toolTip and contentholder variables are already jquery objects.

Answer 4

I'm not sure and haven't tested it, but what if you try to move the two functions ( showToolTip() and hideToolTip() ) before or after the $(function(){}); The might get seen as inner functions of some sort instead of global functions and that might be a thing.