Fatal编程技术网
  • jquery/
  • Jquery JSFIDLE上的代码相同，但不会在我的服务器上运行？

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

jquery css

Jquery JSFIDLE上的代码相同，但不会在我的服务器上运行？,jquery,css,jsfiddle,Jquery,Css,Jsfiddle,我很困惑。我只是尝试测试一个jquery simpleselect，并让它在jquery上正常工作，但是当我将它上传到我的服务器时。。。完全不行！我发誓代码是一样的，但也许新鲜的眼睛能帮上忙。我错过了什么 这是我上传的代码： <html> <head> <link rel="stylesheet" type="text/css" href="https://smartieparts.com/bootstrap/includes/templates/boo

我很困惑。我只是尝试测试一个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>
这里是

注意，JSFIDLE有外部css和js资源，我完全是从上面的代码复制/粘贴这些资源的

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

我已将文件上载到我的服务器，以便您检查

在文档准备就绪之前，无法安全地操作页面。jQuery为您检测这种准备状态。$document.ready中包含的代码只有在页面文档对象模型DOM准备好让JavaScript代码执行后才会运行。$window.loadfunction{…}中包含的代码将在整个页面图像或iFrame（而不仅仅是DOM）就绪后运行

将代码包装到处理程序中

指定DOM完全加载时要执行的函数

准备好文件

$( document ).ready(function() {
    $("#currency-select").simpleselect({
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"
      });
});
在文档准备就绪之前，无法安全地操作页面。 jQuery为您检测这种准备状态。代码包括在内 $document.ready将只运行一次页面文档对象 模型DOM已准备好让JavaScript代码执行。代码包括 在$window内。loadfunction{…}将在整个 页面图像或iFrame（不仅仅是DOM）已准备就绪

另外，您是否检查了控制台窗口：您可以看到一些文件没有加载。纠正它们，一切都会好起来的。

头标记中的脚本在执行时对DOM一无所知。加载DOM后，应在关闭标记之前移动，o在处理程序中包装代码：

在关闭标记之前移动脚本更好。

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

1在触发onLoad事件后执行此脚本。您可以像这样使用jQuery来实现

$(function() {
    $("#currency-select").simpleselect({
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"
    });
});
2您可以将脚本标记移动到结束标记之前，这样可以在页面元素之后处理脚本。这将是您所有脚本的建议选项。

将您的代码包装在文档准备好的handler中。如果您想向hammerlol寻求澄清，请使用注释。我特别没有这样做，因为它直接说明了编辑此问题。。。不管怎样，我想我真的不在乎。接得好，对此我很抱歉。在我的匆忙中，我在绝对路径上有一个拼写错误，我使用了相对，但在这里发布时使用了绝对。我已经修好了，你可以看到它本身什么都没有改变。此评论仅针对未加载的文件，而不是文档包装。谢谢！我觉得自己很傻，因为我读到了关于其他人问题的相同答案，但没有表明我也有同样的问题。那么为什么它在JSFIDLE中有效呢？@bcsteeve，FIDLE在我这边不起作用，但是有一个左手边的选项，就像你在LOADAH上使用的ONDOMREAY一样，好的。现在我明白这是为什么了。谢谢，好吗？有时你不会吗？情况会非常具体。甚至库本身也值得移到底部，因为它们不会阻止加载DOM。我可能会把我的分析脚本留在脑子里。谢谢你的提示。 
$( document ).ready(function() {
    $("#currency-select").simpleselect({
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"
      });
});

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

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