Fundamentally Doing Something Wrong With Function Calls. Functions Do Work In The Console

This is a solid, proper syntax set of functions, and for the life of me I can't figure out why, but the function ServiceHover() will not run unless I trigger it manually in the con

Solution 1:

Well what I know is, since your dropdown-service is added dynamically, you need to delegated it to closest static parent present in the document which is dropdown-service in your case.

 $(".dropdown-service").on("mouseenter" ,"p",function () {
     ..
 });

  $(".dropdown-service").on("mouseleave" ,"p",function () {
      ...
 });

Since live is deprecated in latest version of jQuery you need to use on delegated event and break the hover into mouseenter and mouseleave function.

fiddle here

Solution 2:

Check your console, you have Uncaught ReferenceError: ServiceArray is not defined

This Exception is thrown and the rest of the program is not ran

EDIT: after fiddle changed with the missing Arrays initialization is seems like the code works. I added alerts in the begining of 2 functions to make sure they are called (see http://jsfiddle.net/gbJcg/3/)

EDIT #2:

The call to $(".dropdown-service > p").hover(...) is done when you do not have any elements that respond to ".dropdown-service > p" selector, They are probably added later via ajax or some other html manipulation that is done by js

You should use the equivalent for jquery live instead:

$(document).on("mouseenter",".dropdown-service > p",function() {
    ....
});
$(document).on("mouseleave",".dropdown-service > p",function() {
    ....
});