Javascript “如何修复”；未捕获的TypeError:未定义的不是函数；？_Javascript_Jquery_Html_Css

Javascript “如何修复”；未捕获的TypeError:未定义的不是函数；？

javascript jquery html css

Javascript “如何修复”；未捕获的TypeError:未定义的不是函数；？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,以下是JSFIDLE：我将包括我的代码，然后解释什么是错误的以下是我的HTML标题，显示所有内容都应链接： <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/a

以下是JSFIDLE：

我将包括我的代码，然后解释什么是错误的

以下是我的HTML标题，显示所有内容都应链接：

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <link rel='stylesheet' href='test.css'/>
        <script src='test.js'></script>
    </head>

以下是JS：

$(document).ready(function() {
    $("#draggable5").draggable({
        grid: [80, 80]
    });
});

所以网格将启动，段落将在那里，但是如果我尝试拖动它，它将不起作用。当我检查页面时，它给了我一个错误：“UncaughtTypeError:undefined不是一个函数”，它指向我的JS代码的第2行。我做错了什么

以下是整个HTML：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <link rel='stylesheet' href='test.css'/>
    <script src='test.js'></script>
</head>
<body>
<div class="demo">
    <div id="draggable5" class="draggable ui-widget-content">
        <p>I snap to a 80 x 80 grid</p>
    </div>
</div>
</body>
</html>


我捕捉到一个80 x 80的网格

我认为问题可能是您正在代码的开头加载jquery和js文件。当它读取你的js时，它在寻找$（#draggable5），但是draggable5还没有加载，所以它是一个空选择器。尝试将脚本移动到body元素关闭之前。

我将您提交的代码粘贴到本地HTML文件中，对我来说效果很好（我没有添加test.js，而是将代码粘贴到脚本标记中，就在关闭body标记之前）。这是整个文件（仅在Chrome中测试）


试验
.拖拉{
宽度：80px；
高度：80px；
浮动：左；
利润率：0 10px 10px 0；
字体大小：.9em；
}
.ui小部件标题p、.ui小部件内容p{
保证金：0；
}
#snaptarget{
高度：140像素；
}
正文，html{
背景：url（'http://i.imgur.com/FBs3b.png）重复；
}            
我捕捉到一个80 x 80的网格
$（文档）.ready（函数（）{
$（“#可拖动5”）。可拖动({
网格：[80,80]
});
});

在Chrome 35.0.1916.153中非常适合我检查

jqruery ui

是否已加载…可能是由于网络问题导致加载失败…你能为我们创建一个失败的示例吗？一个工作示例没有多大帮助。这就是问题所在…它在JSFIDLE中可以工作，但如果我自己编写并启动它，它就不会工作在所有jquery脚本加载完毕后，您正在加载test.js吗？是的（注释长度权限的空格填充符）您发布的所有内容看起来都很好，这就是为什么您的代码可以在JSFIDLE上运行的原因。其中一定有其他干扰。这对我来说也很有效……一定有一些疯狂的链接问题。

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <link rel='stylesheet' href='test.css'/>
    <script src='test.js'></script>
</head>
<body>
<div class="demo">
    <div id="draggable5" class="draggable ui-widget-content">
        <p>I snap to a 80 x 80 grid</p>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <link rel='stylesheet' href='test.css'/>
    <style type="text/css">            
        .draggable {
            width: 80px;
            height: 80px;
            float: left;
            margin: 0 10px 10px 0;
            font-size: .9em;
        }
        .ui-widget-header p, .ui-widget-content p {
            margin: 0;
        }
        #snaptarget {
            height: 140px;
        }
        body, html {
            background: url('http://i.imgur.com/FBs3b.png') repeat;
        }            
    </style>
</head>
<body>
    <div class="demo">
        <div id="draggable5" class="draggable ui-widget-content">
            <p>I snap to a 80 x 80 grid</p>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#draggable5").draggable({
                grid: [80, 80]
            });
        });
    </script>       
</body>