將jQuery添加到Header.php文件失敗

Question

我將jQuery庫添加到header.php文件中，但index.php文件無法訪問該庫。 但是，當直接從index.php文件引用該庫時，index.php文件可以訪問jQuery庫。

這是文件的結構。

---header.php---
--index.php-----

以下是header.php的代碼

 <!DOCTYPE html> <html> <head> <title>Title of the document</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery-1.11.3.min.js"></script> <script type='text/javascript' src='scroll.js'></script> </head <body> <header> <a href="/datacentre/index.php" title="Return to the homepage" id="logo"> <img src="/datacentre/images/cagd_logo.jpg" alt="CAGD logo" style="width:30px;height:30px;"/> </a> <span class="headerspan">CAGD Data Centre</span> <a href="/datacentre/webhelp/index.htm" title="Return to the homepage" id="helpfile"> help </a> </header>

index.php的代碼

 <?php include('/header.php'); ?> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Row 1</td> <td>Row 1</td> <td>Row 1</td> <td>Row 1</td> <td>Row 1</td> </tr> <tr> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> </tr> <tr> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> </tr> <tr> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> </tr> <tr> <td>Row 5</td> <td>Row 5</td> <td>Row 5</td> <td>Row 5</td> <td>Row 5</td> </tr> <tr> <td>Row 6</td> <td>Row 6</td> <td>Row 6</td> <td>Row 6</td> <td>Row 6</td> </tr> <tr> <td>Row 7</td> <td>Row 7</td> <td>Row 7</td> <td>Row 7</td> <td>Row 7</td> </tr> <tr> <td>Row 8</td> <td>Row 8</td> <td>Row 8</td> <td>Row 8</td> <td>Row 8</td> </tr> <tr> <td>Row 9</td> <td>Row 9</td> <td>Row 9</td> <td>Row 9</td> <td>Row 9</td> </tr> <tr> <td>Row 10</td> <td>Row 10</td> <td>Row 10</td> <td>Row 10</td> <td>Row 10</td> </tr> </tbody> </table> </body> </html>

Javascript scroll.js的代碼

 $('table').on('scroll', function () { $("table > *").width($("table").width()) + $("table").scrollLeft()); });

CSS代碼style.css

 html { font-family: verdana; font-size: 10pt; line-height: 25px; } header ,footer , aside, nav , article{ display:block; } .headerspan{ height:40px; width:860px; margin: 0px auto; text-align: center; position:absolute; top:-10; font-size:200%; } table { border-collapse: collapse; width: 300px; overflow-x: scroll; display: block; } thead { background-color: #EFEFEF; margin-top:50px; } thead, tbody { display: block; } tbody { overflow-y: scroll; overflow-x: hidden; height: 140px; } td, th { min-width: 100px; height: 25px; border: dashed 1px lightblue; } #search { padding: 5px 9px; height: 12px; width: 380px; border: 1px solid #a4c3ca; font: normal 13px 'trebuchet MS', arial, helvetica; background: #f1f1f1; border-radius: 50px 3px 3px 50px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); }

Answer 1

BodyJuan Bonnet收到了這個。 加載完畢后，在主體底部添加JQUERY && scroll.js，否則Jquery在加載HTML之前找不到引用。

頭部首先加載，因此在調用時不存在主體。

在加載Body之后再加載Jquery，它將更好地工作。 如果您真的不想或不能... charliefti有解決方案。 $（document）.ready（）{您的Jquery代碼}如果您的主體在調用$（'＃myElement'）時不存在，則Jquery無法找到它，即使您可以在源代碼中看到它。 操作順序。

如果可以的話，最好始終將Jquery和任何腳本加載到正文的底部。 這意味着HTML將在.js之前加載，從而提供更好的用戶體驗。

將jQuery添加到Header.php文件失敗

問題描述

1 個解決方案

解決方案1
0 2016-03-21 19:30:29

將jQuery添加到Header.php文件失敗

問題描述

1 個解決方案

解決方案1 0 2016-03-21 19:30:29

解決方案1
0 2016-03-21 19:30:29