Question

我创建了一个名为jquery.js的文件：

$(document).ready(function{
   jQuery('#sortable1, #sortable2')
     .sortable(
     {'connectWith':'.connectedSortable',
     'dropOnEmpty':true,
     'scroll':true,
      items: "li:not(.emptyMessage)",
      receive: function(event, ui) {
             //hide empty message on receiver
             $('li.emptyMessage', this).hide();

             //show empty message on sender if applicable
             if($('li:not(.emptyMessage)', ui.sender).length == 0){
                 $('li.emptyMessage', ui.sender).show();
             } else {
                 $('li.emptyMessage', ui.sender).hide();
             }            
         }

    });
});

在我的index.html.erb中，我有：

我添加了第一个SCRIPT SRC ......：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="assets/jquery.js" type="text/javascript"></script>
<ul id="sortable1" class="connectedSortable">
   <li>List 1-1</li>
   <li>List 1-2</li>
   <li>List 1-3</li>
   <li>List 1-4</li>
   <li class="emptyMessage">This is empty</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li>List 2-1</li>
  <li>List 2-2</li>
  <li>List 2-3</li>
  <li>List 2-4</li>
  <li class="emptyMessage">This is empty</li>
</ul>
<div class="clear"></div>

在console中，我收到了下一个错误：

Uncaught SyntaxError: Unexpected token { :3000/assets/jquery.js?body=1:1
Uncaught ReferenceError: jQuery is not defined jquery_ujs.js:429
Uncaught ReferenceError: jQuery is not defined jquery.purr.js:162
Uncaught ReferenceError: jQuery is not defined best_in_place.js:561
Uncaught ReferenceError: jQuery is not defined workers.js:3
Uncaught ReferenceError: $ is not defined application.js:19
Uncaught SyntaxError: Unexpected token {

我认为所有的错误都是因为jquery.js。

请帮忙。

Answer 1

我认为你必须在doc ready

之前声明它

如果您在此脚本之前未附加jQuery plugin，则这些修改将无效，因此请先尝试包含jQuery，然后再使用此脚本：

And if you use cdn hosted script then page load performance will boostup.

很少有人负责照顾：

$(document).ready(function{
   //--------------------^----missing braces '()'

它应该是：

$(document).ready(function(){

如果这不解决，请尝试在此行上方声明

jQuery = $.noConflict();
jQuery(document).ready(function($){

你需要这个订单：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>

Answer 2

您还应该加载完整的jquery文件，例如：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

将前两行更改为以下内容也更好一点：

jQuery(document).ready(function ($) {
    $('#sortable1, #sortable2')

Answer 3

在您的HTML中包含jquery，包括您的.js文件

<script src="../../Scripts/jquery-1.8.3.js" type="text/javascript"></script>

然后..

<script src="../../Scripts/jQuery.js" type="text/javascript"></script>

Answer 4

在使用它定义的任何内容之前，您需要在页面中实际加载JQuery库。在没有加载的情况下，你试图调用的内容都没有在任何地方被定义，所以没有什么可以调用的。

e.g。在任何其他脚本标记之前放置以下内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

Jai关于语法错误的答案也是正确的：

Uncaught SyntaxError: Unexpected token { :3000/assets/jquery.js?body=1:1

是由于您的匿名函数声明中的函数关键字后面没有括号这一事实造成的。

声明没有参数的匿名函数的正确方法是：


function () {
  //anonymous function routines/etc in here
}

所以你的第一行需要看起来像：


$(document).ready(function () {

创建包含jquery的js文件的错误

4 个答案: