"$"未定义;jquery在<头部>;没有冲突的脚本或库

"$" is undefined; jquery clearly linked to in <head>; no conflicting scripts or libraries

本文关键字：quot 冲突 脚本 头部 未定义 jquery lt gt      更新时间：2024-01-10

-=-此代码功能。我只能假设缓存有问题，因为在非函数/函数之间没有任何更改。感谢大家的帮助（尤其是Niko，他让我对jquery语法有了更丰富的理解）-=-

我已经亲手编写了这个脚本，并最终决定将其更新为jquery，以适应这一点，并简化代码。这应该是呈现一个简单的菜单（它以前做过）。

  • 这两个.js文件与.html文件位于同一目录中。这是在我的电脑上测试的，而不是在服务器上
  • 这个代码的前一个版本只需链接到taskMaster.js就可以完美地工作。当时我的代码没有使用"$"标记的调用
  • Firebug在尝试调用$(document).ready(function () {时显示错误"ReferenceError:$未定义"
  • "net"选项卡不显示正在加载的.js文件；net选项卡完全为空，没有显示任何活动-我相信这是因为我正在PC上测试它；当我加载功能代码时，网络面板是空的
  • 我偶然发现有什么问题，重新安装了jquery的新版本，但没有用

损坏的代码"taskMaster.js"：

$(document).ready(function () {

//main menu
function Main()
{
    var mainList = ["New List","Show Lists","Delete Lists"];
    //var onClick = [New,Lists,Delete];
    var mainMenu = new Menu("Main Menu","menuMain",mainList/*,null*/);
    mainMenu.contentMenu();
}
$(Main);

//menu class
function Menu(name,divClass,content/*,onclick*/)
{
    $("#interface").html(null);
    //title
    formatDiv("interface",name,divClass,name/*,null*/);
    //return
    if(name != "Main Menu")
    {
        formatDiv(name,null,"return","^ Main Menu","Main()");
    }

    //display options
    this.contentMenu = function()
    {
        for(i=0; i<content.length; i++)
        {
            formatDiv("interface",content+i,"menuContent",content[i]/*,onclick[i]*/);
        }
    }
}

//format divs
function formatDiv(target,divId,divClass,content/*,onclick*/)
{
    $("#"+target).append("<div id=''" + divId + "'' class=''" + divClass + "''>" + content +"</div>");
    /*$("#"+divId).click(function()
    {
        onclick;
    });*/
}
});

我注释掉了未使用的行，但它显示"$"为未定义的

这是HTML:

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="taskMaster.js"></script>
    <link rel="stylesheet" type="text/css" href="taskMaster.css" />
</head>
    <body>
        <div id="interface">
        </div>
    </body>
</html>

据我所知，这个html没有什么问题——以前同样的格式运行得很好。所改变的是，我引入了jquery，并将taskMaster.js中的一些命令更改为使用"$"。

好的，我现在把这个作为答案发布，因为在这里提供一些例子更容易。

第一件事是：每当您执行访问DOM的操作（如$("#interface").html(null);）时，首先需要确保DOM已准备好。这就是"准备就绪"事件的用途：

$(document).ready(function() {
    /* The code here is executed when the DOM is ready! */
});

因此，如果"Main（）"是一个启动一切的函数，您可以简单地列出DOM准备好时要调用的函数：

function Main() {
    /* ... */
}
$(document).ready(Main);

大多数情况下，将整个JavaScript代码封装在"就绪"事件处理程序中也是安全的：

$(document).ready(function() {
    function Main() { /* ... */ }
    function formatDiv(...) { }
    // ...
    // All functions are defined, now let's go:
    Main();
});

现在点击处理程序：jQuery的"click（）"函数需要一个函数，当点击相应的DOM元素时，该函数将被调用。您当前正在向它传递类似"New（）"的字符串，但应该直接传递这些函数。要做到这一点，可以通过以下方式更改"Main（）"中的代码：

// Old: var onClick = ["New()","Lists()","Delete()"];
var onClick = [New, Lists, Delete]; // New

这会将实际函数添加到数组中，而不仅仅是它们的名称。

相关文章：