Jquery元素僅在頁面刷新后才起作用

Question

我正在構建基於Reacts的應用程序，我在頁面上有一些jquery元素，例如JqueryUI日期選擇器和bootstraps工具提示。

問題是這些選項在我重新加載頁面之前不起作用。

所以它就像第一次沒有加載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>

Answer 1

可能發生的是您的初始頁面加載嘗試從網絡加載所有內容，而第二個加載從瀏覽器緩存中檢索資產。 您可以使用開發人員工具來驗證這一點，以便始終加載不帶緩存; 如果我的假設是正確的，那么即使你重新加載頁面，你也會看到錯誤的普遍性。

正如@vanburen在評論中指出的那樣，可能的解釋是你沒有正確地訂購你的腳本。 應該始終首先加載jQuery，但是現在你已經在Bootstrap之后得到了它。 當您嘗試在打開開發人員工具的情況下按原樣加載頁面時，您會看到控制台錯誤：

未捕獲的錯誤：Bootstrap的JavaScript需要jQuery（匿名函數）@ bootstrap.min.js：6

作為額外的優化，您可以考慮將CSS放在同步腳本之前，這樣瀏覽器可以在同時加載JavaScript時加載和解析它們。

結論：確保熟悉您的開發人員工具。 當您遇到意外行為時，它們應始終是您的第一個資源。

Jquery元素僅在頁面刷新后才起作用

問題描述

1 個解決方案

解決方案1
2 2015-10-22 16:34:26

Jquery元素僅在頁面刷新后才起作用

問題描述

1 個解決方案

解決方案1 2 2015-10-22 16:34:26

解決方案1
2 2015-10-22 16:34:26