javascript jQuery 类型错误:$("img").draggable(); 不是函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14532434/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 21:53:19  来源:igfitidea点击:

jQuery TypeError: $("img").draggable(); is not a function

javascriptjqueryhtml

提问by user1867717

Hello, I have been having a problem with this code for the last 3 hours and I'm hoping someone is gonna be able to help me out here.

您好,我在过去 3 个小时内一直遇到此代码的问题,我希望有人能够在这里帮助我。

jQuery

jQuery

$(document).ready(function() { 
$("img").draggable();});

HTML header

HTML 标题

<head>
    <title>Chess</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="reset.css" />
    <link rel="stylesheet" type="text/css" href="default.css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="default.js"></script>
</head>

FireBug Error

FireBug 错误

TypeError: $("img").draggable is not a function [Break On This Error] $("img").draggable();

My code works perfectly on codecademy.combut when i try it on localhost or my server, i keep getting this error message. What am i doing wrong here?

我的代码在codecademy.com上运行良好,但是当我在 localhost 或我的服务器上尝试时,我不断收到此错误消息。我在这里做错了什么?

Complete HTML

完整的 HTML

    <!DOCTYPE html>
 <html>
    <head>
        <title>Chess</title>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="reset.css" />
        <link rel="stylesheet" type="text/css" href="default.css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="default.js"></script>
    </head>
    <body>
     <div id="board">
        <ul id="first_row">
            <li class="white_space"><img src="pieces/Rook_Black.png" /></li>
            <li class="black_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="black_space"><img src="pieces/Rook_White.png" /></li>
        </ul>
        <ul id="second_row">
            <li class="black_space"><img src="pieces/Knight_Black.png" /></li>
            <li class="white_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="white_space"><img src="pieces/Knight_White.png" /></li>
        </ul>
        <ul id="third_row">
            <li class="white_space"><img src="pieces/Bishop_Black.png" /></li>
            <li class="black_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="black_space"><img src="pieces/Bishop_White.png" /></li>
        </ul>
        <ul id="forth_row">
            <li class="black_space"><img src="pieces/Queen_Black.png" /></li>
            <li class="white_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="white_space"><img src="pieces/King_White.png" /></li>
        </ul>
        <ul id="fifth_row">
            <li class="white_space"><img src="pieces/King_Black.png" /></li>
            <li class="black_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="black_space"><img src="pieces/Queen_White.png" /></li>
        </ul>
        <ul id="sixth_row">
            <li class="black_space"><img src="pieces/Bishop_Black.png" /></li>
            <li class="white_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="white_space"><img src="pieces/Bishop_White.png" /></li>
        </ul>
        <ul id="seventh_row">
            <li class="white_space"><img src="pieces/Knight_Black.png" /></li>
            <li class="black_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="black_space"><img src="pieces/Knight_White.png" /></li>
        </ul>
        <ul id="eight_row">
            <li class="black_space"><img src="pieces/Rook_Black.png" /></li>
            <li class="white_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="white_space"><img src="pieces/Rook_White.png" /></li>
        </ul>
     </div>
    </body>
</html>

回答by prodigitalson

Youre not loading jquery, only jquery-ui. jquery itself is not loaded by jquery-ui so you need 2 different scripttags.

你没有加载 jquery,只有 jquery-ui。jquery 本身不是由 jquery-ui 加载的,因此您需要 2 个不同的script标签。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>