Тот же код на jsfiddle, но не будет работать на моем сервере? [дубликат]

На этот вопрос уже есть ответ здесь:

Я так запуталась. Я просто пытаюсь протестировать jquery (simpleselect) и получил его работу нормально на jquery, но затем, когда я загружаю его на свой сервер... совершенно не работает! Клянусь, это тот же код, но, может быть, свежий взгляд поможет. Что я что, пропал здесь?

Это код, который я загрузил: 

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://smartieparts.com/bootstrap/includes/templates/bootstrap/css/stylesheet_jquery.simpleselect.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://smartieparts.com/bootstrap/includes/templates/bootstrap/jscript/jscript_jquery.simpleselect.min.js"></script>
    <script type="text/javascript">
      $("#currency-select").simpleselect({
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"
      });
    </script>
  </head>
  <body id="indexHomeBody">
    <select name="currency" id="currency-select">
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
      <option value="GBP">GBP</option>
      <option value="CAD">CAD</option>
      <option value="AUD">AUD</option>
      <option value="CHF">CHF</option>
      <option value="CZK">CZK</option>
      <option value="DKK">DKK</option>
      <option value="HKD">HKD</option>
      <option value="JPY">JPY</option>
      <option value="NZD">NZD</option>
      <option value="NOK">NOK</option>
      <option value="PLN">PLN</option>
      <option value="SGD" selected="selected">SGD</option>
      <option value="SEK">SEK</option>
      <option value="ILS">ILS</option>
      <option value="MXN">MXN</option>
      <option value="TWD">TWD</option>
      <option value="PHP">PHP</option>
      <option value="THB">THB</option>
    </select>
  </body>
</html>

А вот JSfiddle

Обратите внимание, что JSfiddle имеет внешние css и JS ресурсы, которые я точно копирую/вставляю из кода выше.

На странице JSfiddle раскрывающийся список форматируется и имеет эффект затухания. На моем сервере он несколько отформатирован и не имеет затухания.

Я загрузил файл на свой сервер, так что вы можете проверить. Ссылка

5 3
css jquery jsfiddle

5 ответов:

Ref

Страницей нельзя безопасно управлять, пока документ не будет " готов."jQuery обнаруживает это состояние готовности для вас. Код, включенный в $( document ).ready(), будет выполняться только после того, как объектная модель документа страницы (DOM) будет готова для выполнения кода JavaScript. Код, включенный в $( window ).load(function() { ... }), будет запущен, как только вся страница (изображения или iframes), а не только DOM, будет готова.

Оберните код в обработчикdocument-ready .

Укажите функцию для выполнить, когда DOM полностью загружен.

<script>
$(function() {
    // Handler for .ready() called. 
    $("#currency-select").simpleselect({
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"
    });
});
</script>
5

Скрипт в теге head ничего не знает о вашем DOM при выполнении. Вы должны переместить <script> перед закрытием тега </body> (после загрузки DOM), o обернуть код в обработчикdocument-ready : 

<script>
$(function() {
    // Handler for .ready() called. 
    $("#currency-select").simpleselect({
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"
    });
});
</script>

Перемещение скрипта перед закрытием </body> тега лучше ИМХО.

2

Set document-ready

$( document ).ready(function() {
    $("#currency-select").simpleselect({
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"
      });
});

Страницей нельзя безопасно управлять, пока документ не будет "готов." jQuery обнаруживает это состояние готовности для вас. Код внутри $( документ ).ready () будет выполняться только один раз объект page Document Модель (DOM) готова к выполнению кода JavaScript. Код включен внутри $ (окно).load(function() { ... }) запустится сразу весь страница (картинки или фреймы), а не только дом готов.

Подробнее о компании это

2
$( document ).ready(function() {
    $("#currency-select").simpleselect({
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"
      });
});

Кроме того, вы проверяете окно консоли: вы можете видеть, что некоторые файлы не загружаются. Исправьте их, и все будет работать нормально.

Введите описание изображения здесь

1

Сценарий, который вы написали, просто срабатывает до загрузки любого из элементов. Таким образом, jQuery не находит #currency-select, поскольку он еще не существует. Чтобы решить эту проблему, у вас есть два способа:

1) Выполните этот сценарий после запуска события onLoad. Вы можете сделать это с помощью jQuery следующим образом

$(function() {
    $("#currency-select").simpleselect({
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"
    });
});

2) Вы можете переместить тег script непосредственно перед закрывающим тегом </body> Таким образом, сценарии обрабатываются после элементов страницы. И этот вариант был бы предложен для всех ваш скрипт.

1