Jquery 元素仅在页面刷新后工作答案

【问题标题】：Jquery elements only work after page refreshJquery 元素仅在页面刷新后工作
【发布时间】：2015-10-22 15:36:01
【问题描述】：

我正在构建基于 Reacts 的应用程序，页面上有一些 jquery 元素，例如 JqueryUI 日期选择器和引导工具提示。

问题是这些选择在我重新加载页面之前不起作用。

所以就像 jQuery 脚本不是第一次加载一样。

我查看了控制台，没有看到任何与 jQuery/javascript 相关的错误。

任何帮助将不胜感激。这是我的 index.html 页面

<!doctype html>
<html class="no-js" lang="">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width">

      <title>ICETEA</title>

      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

      <!-- JQuery UI JS - Used for the datepicker -->
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

      <!-- Bootstrap theme -->
      <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

      <link rel="stylesheet" href="/css/main.css">
      <!-- JQuery UI CSS - Theme: Blitzer, used for the datepicker -->
      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/blitzer/jquery-ui.css">

  </head>
  <body>

    <div id="app"></div>

    <script src="/js/main.js"></script>

    <script>
      $(document).ready(function(){
          $('[data-toggle="tooltip"]').tooltip();
      });
    </script>

    <script>
      $(function() {
        $( "#datepicker" ).datepicker();
        $( "#datepicker" ).change(function() {
          $( "#datepicker" ).datepicker( "option", "dateFormat", "DD d MM" );
        });
      });
    </script>

  </body>
</html>

【问题讨论】：

在.ready()里面设置函数
@Baruch - 他们是$(function(){...}) 类似于$(document).ready(function(){...})
您需要在所有其他脚本之前加载 jQuery（现在是在 Bootstrap JS 之后）。第一 > https://code.jquery.com/jquery-2.1.3.min.js

标签： javascript jquery html twitter-bootstrap jquery-ui

【解决方案1】：

可能发生的情况是，您的初始页面加载尝试从网络加载所有内容，而第二次加载从浏览器缓存中检索资产。您可以通过使用您的开发人员工具来验证这一点，以始终在没有缓存的情况下加载；如果我的假设是正确的，那么即使您重新加载页面，您的错误也会更加普遍。

正如@vanburen 在他们的评论中指出的那样，可能的解释是您没有正确排序脚本。 jQuery 应该总是首先加载，但是现在你在 Bootstrap 之后就已经得到了它。当您尝试在开发人员工具打开的情况下按原样加载页面时，您会看到控制台错误支持这一点：

未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery（匿名函数）@bootstrap.min.js:6

作为额外的优化，您可以考虑将 CSS 放在同步脚本之前，这样浏览器就可以在加载 JavaScript 的同时加载和解析它们。

底线：一定要熟悉您的开发者工具。当您遇到意外行为时，它们应该始终是您的第一资源。

【讨论】：