jsfiddle 上的代码相同，但不会运行在我的服务器上？

Question

我很困惑。我只是想测试一个 jquery（简单选择）并让它在 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 和我从上面的代码中完全 copy/pasted 的 js 资源。

在 JSfiddle 页面上，下拉菜单已格式化并具有淡入淡出效果。在我的服务器上，它有点格式化并且没有褪色。

我已将文件上传到我的服务器，您可以查看。 Link

Answer 1

Ref

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

将您的代码包装在 document-ready 处理程序中。

Specify a function to execute when the DOM is fully loaded.

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

Answer 2

设置文档就绪

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

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

Read more about it

Answer 3

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

此外，您是否检查了控制台window：您可以看到某些文件未加载。更正它们，一切都会正常。

Answer 4

head 标签中的脚本在执行时对您的 DOM 一无所知。您应该在关闭 </body> 标记之前移动 <script>（在加载 DOM 之后），o 将您的代码包装在 document-ready 处理程序中：

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

关闭 </body> 标签之前移动脚本更好恕我直言。

Answer 5

您编写的脚本只是在加载任何元素之前触发。这样 jQuery 就找不到 #currency-select，因为它还不存在。要解决这个问题，您有两种方法：

1) onLoad事件触发后执行该脚本。你可以用 jQuery 像这样

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

2) 您可以将脚本标记移到结束标记之前 </body> 这样，脚本将在页面元素之后处理。这一个将是您所有脚本的建议选项。

jsfiddle 上的代码相同，但不会 运行 在我的服务器上？

Same code on jsfiddle but won't run on my server?

css

jquery

jsfiddle

jsfiddle 上的代码相同，但不会运行在我的服务器上？