从根本上说function调用有问题。 函数在控制台中起作用

这是一个坚实，正确的语法函数集，对于我的生活我无法弄清楚为什么，但函数ServiceHover（）将不会运行，除非我在控制台中手动触发它，而它几乎完全相等的CategoryHover（ ）每次运行都很完美。 它必须是我调用函数的方式，显然有一些我在javascript中从根本上遗漏的函数，因为这经常发生在我身上，我不知道为什么我的函数没有执行。

我保持我的代码都得到很好的评论，所以我不必解释函数的目的，而且，这更多的是函数的基本执行而不是它们的内部function的问题。 如果在控制台中手动调用，则每个函数都有效。

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

这些电话我做错了什么？

JS小提琴： http ： //jsfiddle.net/gbJcg/4/

注意： 我在我的问题中提到但由于某种原因没有显示更新，所以应假定所有数组都已定义。 我现在将它们包括在内以消除混淆，但它会使脚本长得很长

添加细节： ChangeCategory有效。 ChangeService似乎没有。 但是，如果我在控制台中复制并粘贴ChangeService，并在控制台中调用它，则该function可以完美地运行。 这有帮助吗？ 我不知道我在这里做错了什么……

Answer 1

我所知道的是，由于您的dropdown-service是动态添加的，因此您需要将其委派给文档中最接近的静态父级，这是您的案例中的dropdown-service 。

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

由于在最新版本的jQuery中不推荐使用live，因此您需要on委托事件上使用并将鼠标hover在mouseenter和mouseleave函数中。

在这里小提琴

Answer 2

检查您的控制台，您有Uncaught ReferenceError: ServiceArray is not defined

抛出此exception，并且不运行程序的其余部分

编辑 ：小提琴改变与失踪的数组初始化似乎代码工作。 我在2个函数的开头添加了警报以确保它们被调用（参见http://jsfiddle.net/gbJcg/3/ ）

编辑＃2 ：

调用$(".dropdown-service > p").hover(...)是在没有任何响应".dropdown-service > p"选择器的元素时完成的，它们可能稍后通过ajax添加或由js完成的其他一些html操作

您应该使用等效的jquery live：

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