javascript - 创建包含 jquery 的 js 文件时出现错误

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 中，我有:

我添加了第一个脚本 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>

在控制台中，我收到以下错误:

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

我认为你必须在文档准备就绪之前声明它

如果您在此脚本之前没有附加 jQuery 插件，那么这些修改将不起作用，因此请尝试先包含 jQuery，然后再包含此脚本:

如果您使用 cdn 托管脚本，那么页面加载性能将会提升。

需要注意的小修改:

$(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>