Question

我很困惑。我只是试图测试一个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页面上，下拉列表已格式化并具有淡入淡出效果。在我的服务器上，它有点格式化，没有淡入淡出。

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

Answer 1

Ref

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

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

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

$( window ).load(function() { ... })

Answer 2

设置文档就绪

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

在文档“准备就绪”之前，无法安全地操作页面。 jQuery为您检测这种准备状态。代码包含在里面 $（document）.ready（）只会运行一次页面Document Object Model（DOM）已准备好执行JavaScript代码。代码包括在内在$（window）.load（function（）{...}）里面会运行整个页面（图片或iframe），而不仅仅是DOM，已准备就绪。

Read more about it

Answer 3

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

</body>

在关闭<script> $(function() { // Handler for .ready() called. $("#currency-select").simpleselect({ fadingDuration: 500, containerMargin: 100, displayContainerInside: "document" }); }); </script>标签之前移动脚本是更好的恕我直言。

Answer 4

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

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

Answer 5

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

1）触发onLoad事件后执行此脚本。您可以使用jQuery这样做

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

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

jsfiddle上的代码相同但我的服务器上没有运行？

5 个答案: