2014-09-25 3 views
-1

У меня есть простая веб-страница с html, css и jquery. Цель этой страницы - демонстрационная горизонтальная панель свернуть.Почему объект ожидаемой ошибки в jquery?

<html> 

<head> 
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> 
    <title>Sample HTML</title> 
    <style type="text/css"> 
     html, body { 
      width: 100%; 
      height: 100%; 
     } 

     #map { 
      width: 10%; 
      height: 100%; 
      float: left; 
     } 

     #sidebar { 
      width: 89%; 
      height: 100%; 
      float: left; 
      border: 1px solid; 
     } 

     #toggle { 
      height: 10%; 
      float: right; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(window).load(function() {//this is error line 

      $(document).ready(function() { 
       $("#toggle").click(function() { 
        if ($(this).data('name') == 'show') { 
         $("#sidebar").animate({ 
          width: '10%' 
         }).hide() 
         $("#map").animate({ 
          width: '89%' 
         }); 
         $(this).data('name', 'hide') 
        } else { 
         $("#sidebar").animate({ 
          width: '89%' 
         }).show() 
         $("#map").animate({ 
          width: '10%' 
         }); 
         $(this).data('name', 'show') 
        } 
       }); 
      }); 
     }); 
    </script> 


    </head> 
<body> 

    <div id="map"> 
     <input type="button" data-name="show" value="Toggle" id="toggle"></div> 
    <div id="sidebar">SIDEBAR</div> 
</body> 
</html> 

Я использовал IE отладчик и он попадает в $(window).load(function() говоря объекта ожидается. Я не понимаю, почему он не работает.

Также эта страница занимает много времени для загрузки.

+0

вы загрузив файл HTML с использованием протокола файл как файл ': // путь-к-File' –

+0

@ArunPJohny No. I он сохранен на моем рабочем столе. И я открываю его, используя IE и Chrome, оба не работают. –

+0

* «он сохраняется на моем рабочем столе» * Итак, вы * * загружаете его из файловой системы, а не с веб-сервера? FYI вам нужно только '(window) .load (...)' или '$ (document) .ready (...)', но не оба и, конечно, не вложенные. –

ответ

0

Вам не нужно использовать $(window).load(function() { в $(document).ready есть becuase document.ready пожаров, когда DOM готов и window.load пожаров, когда изображения или любые другие ресурсы нагрузка. См. this для получения дополнительной информации.

Ваша ошибка приходит из-за пути библиотеки JQuery неверен, поэтому проверьте ниже пути еще раз

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> 

Я думаю, что он должен начать с http://

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

И вы можете удалить window.load после коррекции путь lib, и он должен работать.

<script type="text/javascript"> 

      $(document).ready(function() { 
       $("#toggle").click(function() { 
        if ($(this).data('name') == 'show') { 
         $("#sidebar").animate({ 
          width: '10%' 
         }).hide() 
         $("#map").animate({ 
          width: '89%' 
         }); 
         $(this).data('name', 'hide') 
        } else { 
         $("#sidebar").animate({ 
          width: '89%' 
         }).show() 
         $("#map").animate({ 
          width: '10%' 
         }); 
         $(this).data('name', 'show') 
        } 
       }); 
      }); 
    </script> 
+1

Пожалуйста, объясните, почему использование '$ (window) .load (function() {' в этой ситуации генерирует ошибку, упомянутую в вопросе. –

+1

Чтобы пояснить, почему комментарий: хотя ваше предложение, безусловно, правильно, оно не решает проблема не возникает. –

+0

Я не знаю об ошибке, о которой идет речь, но 'document.ready' срабатывает, когда DOM готов, и' window.load' срабатывает, когда все ресурсы DOM готовы, поэтому нет смысла использовать 'document .ready' inside 'window.load'. И как OP с использованием элементов DOM внутри скрипта jquery, тогда нет никакого использования' window.load' как такового. Я нахожу точную причину ошибки. –

Смежные вопросы