Uncaught TypeError: $ (...). Ready (...) не является функцией, даже если она работает на JsFiddle

У JSFiddle, похоже, нет проблем: http://jsfiddle.net/S3LF3/ (если вы наберете URL-адрес, например google.com он выберет значение «.com» или все, что вы положите после точки, и оно находится в списке)

Однако функция jQuery кажется неисправной?

В хроме я получаю эту ошибку:

Uncaught TypeError: $(...).ready(...) is not a function

Вот мой код:

<html> 
<head> 
    <title>Add Site</title> 

    <script src="js/jquery-3.1.1.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/msdropdown/dd.css" /> 
    <script src="js/msdropdown/jquery.dd.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/msdropdown/flags.css" /> 
</head> 
<body> 
<h1>Add new site</h1> 
<div class="contentbox"> 
<form method="post"> 
     <input type="hidden" name="addsite" value="true"/> 
      <p> 
      <label for="site_url">Site url:</label> 
      <input type="text" name="site_url" id="urlText" placeholder="domain.xxx" value=""/> 
     </p> 
     <p> 
     <label for="site_url">Search locale:</label> 
     <select name="locale" id="locale"> 
      <option value=""> 
       Select locale 
      </option> 
      <optgroup label="Popular"> 
<option value=".dk" data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag dk" data-title="Denmark">Denmark - Danish</option> 
                       <option value=".de" data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag de" data-title="Germany">Germany - German</option> 
    <option value=".au" data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag au" data-title="Australia">Australia - English</option> 

    </optgroup> 
      </select> 
      </p> 

     <p> 
      <label for="site_url"></label> 
      <input type="submit" name="submit" class="btn" value="Add"> 
     </p> 


</form> 
</div> 


</body> 
</html> 

<script> 
$(document).ready(function() { 
$("#locale").msDropdown(); 
}) 


(function ($) { 
    $('#urlText').on('change', function() { 
     var value = this.value, 
      parts = this.value.split('.'), 
      str, $opt; 
     for (var i = 0; i < parts.length; i++) { 
      str = '.' + parts.slice(i).join('.'); 
      $opt = $('#locale option[value="' + str + '"]'); 
      if ($opt.length) { 
       $opt.prop('selected', true); 
       break; 
      } 
     } 
    }) 
})(jQuery); 
</script>

То, что я хочу сделать, это когда пользователь вводит URL-адрес, как "google.dk", он должен выбрать значение с «.dk» в конце из раскрывающегося списка для него.

источник

2017-02-17 crystyxn

вы включены файл Jquery и это в правильном месте и загружается? – Pete

yes, it load jquery just fine – crystyxn

ничего не изменил – crystyxn

Ярлык JQuery - $() - кажется, был переопределен другой библиотекой - это мое предположение.

Попробуйте использовать:

jQuery(document).ready(function($) { 
    // Code that uses jQuery's $ can follow here. 
});

источник

2017-02-17 13:02:28

Больше не получается ошибка, но сценарий не делает то, что я хочу, но – crystyxn

Возможно ли, что из-за его более старого jQuery необходимо изменить некоторый синтаксис для работы с 3.1.1? – crystyxn

Я играл с вашим кодом и выяснил, что недостающая точка с запятой в конце $ (документ) .ready();

$(document).ready(function() { 
     $("#locale").msDropdown(); 
    });

Просто попробуйте в встроенном редактор: меню

<html> 
 
<head> 
 
    <title>Add Site</title> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="css/msdropdown/dd.css" /> 
 
    <script src="js/msdropdown/jquery.dd.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="css/msdropdown/flags.css" /> 
 
</head> 
 
<body> 
 
<h1>Add new site</h1> 
 
<div class="contentbox"> 
 
<form method="post"> 
 
     <input type="hidden" name="addsite" value="true"/> 
 
      <p> 
 
      <label for="site_url">Site url:</label> 
 
      <input type="text" name="site_url" id="urlText" placeholder="domain.xxx" value=""/> 
 
     </p> 
 
     <p> 
 
     <label for="site_url">Search locale:</label> 
 
     <select name="locale" id="locale"> 
 
      <option value=""> 
 
       Select locale 
 
      </option> 
 
      <optgroup label="Popular"> 
 
<option value=".dk" data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag dk" data-title="Denmark">Denmark - Danish</option> 
 
                       <option value=".de" data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag de" data-title="Germany">Germany - German</option> 
 
    <option value=".au" data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag au" data-title="Australia">Australia - English</option> 
 

 
    </optgroup> 
 
      </select> 
 
      </p> 
 

 
     <p> 
 
      <label for="site_url"></label> 
 
      <input type="submit" name="submit" class="btn" value="Add"> 
 
     </p> 
 

 

 
</form> 
 
</div> 
 

 

 
</body> 
 
</html> 
 

 
<script> 
 
$(document).ready(function() { 
 
//$("#locale").msDropdown(); 
 
}); 
 

 

 
(function ($) { 
 
    $('#urlText').on('change', function() { 
 
     var value = this.value, 
 
      parts = this.value.split('.'), 
 
      str, $opt; 
 
     for (var i = 0; i < parts.length; i++) { 
 
      str = '.' + parts.slice(i).join('.'); 
 
      $opt = $('#locale option[value="' + str + '"]'); 
 
      if ($opt.length) { 
 
       $opt.prop('selected', true); 
 
       break; 
 
      } 
 
     } 
 
    }) 
 
})(jQuery); 
 
</script>

источник

2017-02-17 13:12:20 StefanSL

кажется, что он работает без jquery.dd.min.js, который я использую здесь http://www.marghoobsuleman.com/countries-dropdown-flags. Могу ли я кому-нибудь работать, сохраняя этот JS-скрипт? – crystyxn

Я даже пытался использовать старый jQuery, который этот парень использует, но все еще не работает. – crystyxn

Причину JSFiddle работает штраф не реально использовать флаг страны ниспадающей плагину найденный. Способ работы плагина отличается от того, как работает стандартный тег html <select>.

Я заглянул в файл jquery.dd.js, и кажется, что нет никакого способа взаимодействия с выпадающим меню с помощью javascript. Поэтому ваша строка $opt.prop('selected', true); действительна для реального выпадающего меню (тег <select>), но не для выпадающего меню плагина, который обрабатывает выбранное состояние по-разному. Кроме того, плагин предоставляет небольшую документацию и почти ничего не содержит комментариев в коде, поэтому это затрудняет понимание того, как работает плагин.

Я вижу 2 решения вашей проблемы:

Вы можете попытаться понять код плагина в файле jquery.dd.js и попытаться реализовать способ сказать плагин, какой элемент вы хотите выбрать. Обычно я бы не рекомендовал редактировать сторонние плагины, но так как сайт, на котором вы получили плагин, не обновлялся с 2012 года, у планета есть мало шансов получать обновления в будущем, поэтому его редактирование будет безопасным в этом дело. Тем не менее, это потребует некоторых знаний в создании плагина jQuery.
Вы можете попробовать найти плагин для выпадающего списка другой страны, который может быть обновлен с использованием javascript, а не только с помощью мыши. Такие проекты можно найти на Github (вот некоторые результаты, полученные на Github: Country flag drop down menu results on Github).

Предыдущая информация найдено:

Из кода вы предоставили, вам не хватает запятой после вызова функции $(document).ready(). Он должен выглядеть следующим образом:

$(document).ready(function() { 
    $("#locale").msDropdown(); 
}); // <--- This semi-colon is missing

Кроме того, код в (function ($) {// code})(jQuery); может выполняться до того документ был готов, что означает этот код иногда может не работать. Попробуйте ввести этот код внутри анонимной функции $(document).ready();. Таким образом, вы убедитесь, что все узлы html будут доступны jQuery.

Наконец, следует рассмотреть вопрос о создании вашей яваскрипта логики где-то внутри <html> тега (внутри <head>, сразу после <body> или прямо перед </body>). При размещении тега <script> после тега </html> может работать сначала, это далеко не допустимый html и может быть причиной некоторых проблем, которые у вас возникают. Лучше всего было бы поставить JavaScript в .js файл и связать его в <head> таким же образом вы связаны JQuery и msdropdown:

<head> 
    <!-- Your other linked files... --> 
    <script src="js/main-logic.js"></script> 
</head>

источник

2017-02-17 13:16:48

Сделал это, но кажется, что это работает, если я вытащил jquery.dd.min.js, http://www.marghoobsuleman.com/countries-dropdown-flags, этот js этого парня, который мне нужен для появления флажков страны в раскрывающемся списке. Есть ли способ отменить это поведение и работать как? – crystyxn

@crystyxn Я обновил свой ответ с новой информацией. Я думаю, что плагин фактически не имеет никакого способа изменить свое состояние с помощью javascript. См. Мой ответ для более подробной информации. –

Uncaught TypeError: $ (...). Ready (...) не является функцией, даже если она работает на JsFiddle

ответ

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