将jQuery添加到Header.php文件失败
[英]Adding jQuery to Header.php File Fails
问题描述
I added jQuery library to a header.php file but the index.php file is not able to access the library. 
我将jQuery库添加到header.php文件中，但index.php文件无法访问该库。 However when the library is referenced directly from the index.php file , the index.php file is able to access the jQuery library. 但是，当直接从index.php文件引用该库时，index.php文件可以访问jQuery库。
This is the structure of the file. 这是文件的结构。
---header.php---
--index.php-----
Below is the code for the header.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>
code for index.php 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>
Code for Javascript scroll.js Javascript scroll.js的代码
$('table').on('scroll', function () { $("table > *").width($("table").width()) + $("table").scrollLeft()); });
The CSS code style.css 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); }
1 个解决方案
解决方案1
0 2016-03-21 19:30:29
BodyJuan Bonnet got this. BodyJuan Bonnet收到了这个。 Add JQUERY && scroll.js at bottom of body, after it has loaded, else Jquery cannot find references as its loaded before your HTML. 加载完毕后，在主体底部添加JQUERY && scroll.js，否则Jquery在加载HTML之前找不到引用。
Head loads first, therefore body does not exist at time of call. 头部首先加载，因此在调用时不存在主体。
load Jquery after Body is loaded, it will work out better. 在加载Body之后再加载Jquery，它将更好地工作。 If you really don't want to, or can't... charliefti has a solution. 如果您真的不想或不能... charliefti有解决方案。 $(document).ready() { Your Jquery code } If your Body does not exist at the point of calling $('#myElement') then Jquery cannot find it, even if you can see it in the source. $（document）.ready（）{您的Jquery代码}如果您的主体在调用$（'＃myElement'）时不存在，则Jquery无法找到它，即使您可以在源代码中看到它。 Order of operations. 操作顺序。
Its always best to load Jquery and any script at bottom of your Body if you can. 如果可以的话，最好始终将Jquery和任何脚本加载到正文的底部。 This means HTML will load before .js, giving better user experience. 这意味着HTML将在.js之前加载，从而提供更好的用户体验。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.