Блог

Главная - Вопросы по программированию - Как исправить «Неперехваченную ошибку типа: неопределенная не является функцией»?

Как исправить «Неперехваченную ошибку типа: неопределенная не является функцией»?

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Вот 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]
    });
});

Таким образом, запустится сетка, и абзац будет там, однако, если я попытаюсь перетащить его, это не сработает. Когда я просматриваю страницу, она выдает сообщение об ошибке: «Uncaught TypeError: undefined не является функцией», которое указывает на строку 2 моего JS-кода. Что я делаю не так?

Вот весь 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>

Комментарии:

1. У меня отлично работает в Chrome 35.0.1916.153

2. проверьте, jqruery ui загружено или нет … возможно, не удалось загрузить из-за какой-то проблемы с сетью…

3. Можете ли вы создать для нас пример, который терпит неудачу? Рабочий пример не очень помогает.

4. Ну, в этом-то и проблема… Это будет работать в JSFiddle, но не будет, если я напишу его самостоятельно и запущу

Ответ №1:

Я вставил код, который вы отправили, в локальный HTML-файл, и он отлично работает для меня (я не добавлял test.js но вставил код в теги скрипта непосредственно перед закрывающим тегом body. Вот весь файл (протестирован только в 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>

Комментарии:

1. Это сработало и для меня… Должно быть, какая-то сумасшедшая проблема с привязкой.

Ответ №2:

Я думаю, проблема может заключаться в том, что вы загружаете jquery и ваши js-файлы в начало вашего кода. Когда он читает ваш js, он ищет $(#draggable5), но draggable5 еще не загружен, поэтому это пустой селектор. Попробуйте переместить свои скрипты непосредственно перед закрытием вашего элемента body.

Комментарии:

1. И вы загружаете test.js после того, как все скрипты jquery будут загружены?

2. Да (заполнение пробела для разрешения длины комментария)

3. Все, что вы опубликовали, выглядит просто отлично, поэтому ваш код работает на jsfiddle. Должно быть, там есть что-то еще, что мешает.

Метки: