Faire fondamentalement quelque chose de mal avec les appels de fonction. Les fonctions fonctionnent dans la console

C’est un ensemble de fonctions solide et correct, et je ne peux pas comprendre pourquoi, mais la fonction ServiceHover () ne s’exécutera pas à moins que je ne la déclenche manuellement dans la console, alors qu’elle est presque exactement égale à CategoryHover ( ) fonctionne parfaitement à chaque fois. Ce doit être quelque chose dans la façon dont j’appelle les fonctions, et il est clair qu’il y a quelque chose que javascript manque fondamentalement à des fonctions, parce que cela m’arrive souvent, où je ne suis pas sûr de savoir pourquoi mes fonctions ne s’exécutent pas.

Je garde mon code très bien commenté, donc je ne devrais pas avoir à expliquer les objectives des fonctions. En outre, il s’agit davantage d’une exécution fondamentale des fonctions que de leurs fonctionnalités internes. Chaque fonction fonctionne si elle est appelée manuellement dans la console.

//this function generates the content of the page based on which category the user selects, //which services the user selects, and help maneuver through each stage of the feature selection //so that the QuoteEngine function can display the user's selected hour count, price per hour // and total cost of the needed service so that the user can see very clearly what services //he is getting and where every dollar of his total cost is coming from so that the user can //make a well informed purchase decision, and be able to clearly understand the services offered //and related pricing. $(document).ready(function () { function BasicDropdown() { //hide the drop-downs to begin with //hide element with class dropdown-category $(".dropdown-category").hide(); //hide element with class dropdown-service $(".dropdown-service").hide(); //when the category list title is hovered over, show the category drop-down list //when element with class category is hovered, do this: $(".category").hover(function () { //show the list $(".dropdown-category").show(); //when element with class category is no longer hovered, do this: }, function () { //hide the list $(".dropdown-category").hide(); }); //when the service list title is hovered over, show the service drop-down list //when element with class service is hovered, do this: $(".service").hover(function () { //show the list $(".dropdown-service").show(); //when element with class service is no longer hovered, do this: }, function () { //hide the list $(".dropdown-service").hide(); }); } //change the selected service based on an id input //create a function to change the selected service function ChangeService(id) { //clear the service list element $(".dropdown-service").empty(); //make the name inside the service drop-down title show the new title $("#ServiceOutput").text(ServiceArray[id][0][1]); //loop through the chosen section of the service array for as many times as the //section is in length for (var i = 0; i < ServiceArray[id].length; i++) { //each loop, append a paragraph element with a data key equal to the current //loop count, an id equal to the id of the array area based on the loop count, //and also insert the element's text according to that loop count also. $(".dropdown-service").append('

' + ServiceArray[id][i][1] + "

"); } //set the variable "Category" to be equal to the chosen id. Category = id; } function CategoryHover() { //make the category drop-down list open and show its list of services //when the user hovers over an element in the category drop-down, do this: $(".dropdown-category > p").hover(function () { //hide the welcome wrapper $(".welcomeWrapper").hide(); //set the variable "thisKey" based on the value of the data "key" attached thisKey = $(this).data("key"); //create a variable "outputList" and assign a value to it from "CategoryArray" outputList = CategoryArray[thisKey]; //set the title of the category drop-down lists title to the currently hovered text $("#CategoryOutput").text($(this).text()); //call the ChangeService function and pass the variable "thisKey" into it ChangeService(thisKey); //show the service drop-down list $(".dropdown-service").show(); //show the ListOutput element (this shows a short description of the hovered element) $(".ListOutput").show(); //append the variable "outputList" as the value of a paragraph element $(".ListOutput").append('

' + outputList + '

'); }, function () { //hide the service drop-down list $(".dropdown-service").hide(); //empty the ListOutput element $(".ListOutput").empty(); //hide the ListOutput element $(".ListOutput").hide(); //show the welcome wrapper again $(".welcomeWrapper").show(); }); } function ServiceHover() { //make the service drop-down list open and show the list of services for the category //when the user hovers over an element in the service drop-down, do this: $(".dropdown-service > p").hover(function () { //hide the welcome wrapper $(".welcomeWrapper").hide(); //set the variable "thisKey" based on the value of the data "key" attached thisKey = $(this).data("key"); //create a variable "outputList" and assign a value to it from "CategoryArray" outputList = ServiceArray[Category][thisKey][2][0]; //show the ListOutput element (this shows a short description of the hovered element) $(".ListOutput").show(); //append the variable "outputList" as the value of a paragraph element $(".ListOutput").append('

' + outputList + '

'); }, function () { //empty the ListOutput element $(".ListOutput").empty(); //hide the ListOutput element $(".ListOutput").hide(); //show the welcome wrapper again $(".welcomeWrapper").show(); }); } BasicDropdown(); CategoryHover(); ServiceHover(); //initiate ChangeService(0); });

Qu’est-ce que je fais mal avec ces appels?

JS Fiddle: http://jsfiddle.net/gbJcg/4/

Remarque: j’ai mentionné dans ma question, mais pour une raison quelconque, la mise à jour ne s’est pas affichée, que tous les tableaux doivent être supposés définis. Je vais maintenant les inclure pour dissiper toute confusion, mais cela rendra les scripts très longs

Détail ajouté: ChangeCategory fonctionne. ChangeService ne semble pas. Cependant, si je copie et colle ChangeService dans la console et que je l’appelle dans la console, la fonctionnalité fonctionne parfaitement. Est ce que ça aide? Je n’ai aucune idée de ce que je fais mal ici …

Ce que je sais, c’est que, puisque votre dropdown-service est ajouté de manière dynamic, vous devez le déléguer au parent statique le plus proche présent dans le document, qui est un dropdown-service dans votre cas.

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

Puisque live est obsolète dans la dernière version de jQuery, vous devez utiliser cet événement délégué et passer le mouseenter mouseleave fonctions mouseenter et mouseleave .

jouer du violon ici

Vérifiez votre console, vous avez Uncaught ReferenceError: ServiceArray is not defined

Cette exception est levée et le rest du programme n’est pas exécuté

EDIT : après que le violon ait été modifié avec l’initialisation manquante des tableaux, il semble que le code fonctionne. J’ai ajouté des alertes au début de 2 fonctions pour m’assurer qu’elles sont appelées (voir http://jsfiddle.net/gbJcg/3/ )

EDIT # 2 :

L’appel à $(".dropdown-service > p").hover(...) est effectué lorsque aucun élément ne répond au ".dropdown-service > p" . Ils seront probablement ajoutés ultérieurement via ajax. ou une autre manipulation HTML faite par js

Vous devez utiliser l’équivalent pour jquery live à la place:

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