Question

这是JSfiddle：http://jsfiddle.net/mostthingsweb/cRayJ/1/

我将包含我的代码，然后解释出错了什么

这是我的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>

这是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;
}

这是JS：

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

因此网格将启动并且段落将在那里，但是如果我尝试拖动它，它将无法工作。当我检查页面时，它给我一个错误说：“未捕获的TypeError：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>

Answer 1

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

<!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>

Answer 2

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

如何修复＆＃34; Uncaught TypeError：undefined不是一个函数＆＃34;？

2 个答案: