Uncaught TypeError: $(...).ready(...) is not a function 即使它适用于 JsFiddle答案

【问题标题】：Uncaught TypeError: $(...).ready(...) is not a function even though it works on JsFiddleUncaught TypeError: $(...).ready(...) is not a function 即使它适用于 JsFiddle
【发布时间】：2017-02-21 00:49:03
【问题描述】：

有问题的 JSFiddle 似乎没有问题：http://jsfiddle.net/S3LF3/（如果您键入 google.com 之类的网址，它将选择“.com”的值或您在点后放置的任何内容，并且它在列表中）

但是 jQuery 函数好像有问题？

在 chrome 中我得到这个错误：

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" 的值。

【问题讨论】：

您是否包含了您的 jquery 文件，它是否在正确的位置并已加载？
是的，它加载 jquery 就好了
它没有改变任何东西
如果您删除文档就绪功能并在其他功能中将$("#locale").msDropdown(); 添加到$('#urlText') 上方会发生什么情况？
我设法摆脱了弗拉纳根建议的错误。但是脚本似乎没有做任何事情。

标签： javascript jquery html css drop-down-menu

【解决方案1】：

我玩过你的代码，发现它是 $(document).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>

【讨论】：

看来，如果没有我从这里使用的 jquery.dd.min.js marghoobsuleman.com/countries-dropdown-flags ，它确实可以工作。我可以在保留这个 JS 脚本的同时让它工作吗？
我什至尝试使用这个家伙正在使用但仍然无法正常工作的旧 jQuery。

【解决方案2】：

JSFiddle 工作正常的原因是它实际上并没有使用您找到的国家标志下拉菜单插件。插件的工作方式与标准<select> html 标签的工作方式不同。

我查看了 jquery.dd.js 文件，似乎无法使用 javascript 与下拉菜单进行交互。因此，您的行 $opt.prop('selected', true); 对真正的下拉菜单（<select> 标记）有效，但不适用于插件的下拉菜单，它以不同的方式处理选定的状态。此外，该插件提供的文档很少，代码中几乎没有 cmets，因此很难了解该插件的工作原理。

我可以看到 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(); 匿名函数中。这样，您将确保 jQuery 可以访问所有 html 节点。

最后，您应该考虑将您的 javascript 逻辑放在 <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>

【讨论】：

这样做了，但如果我取出 jquery.dd.min.js ，marghoobsuleman.com/countries-dropdown-flags 这个家伙的 js，我需要让国家标志出现在下拉列表中，它似乎可以工作。有什么办法可以覆盖这种行为并让两者都起作用？
@crystyxn 我用新信息更新了我的答案。我认为该插件实际上没有任何方法可以使用 javascript 更改其状态。详情请参阅我的回答。

【解决方案3】：

我的猜测是 JQuery 快捷方式 - $() - 似乎已被另一个库覆盖。

尝试使用：

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

【讨论】：

不再收到错误，但脚本没有按照我的意愿执行，仍然
是否有可能因为它的旧 jQuery，必须更改某些语法才能与 3.1.1 一起使用？