don*_*nia 1 html javascript php jquery
我正在使用PHP/MySQL构建CMS,到目前为止使用jQuery为表列添加排序和过滤.通常情况下,它的伟大工程,但偶尔的排序和过滤元件将不会加载 - 如果我手动刷新页面(从来没有,如果我通过链接访问它),只是有时这只是发生.有些时候我可以在它发生之前刷新几次,而其他时候它可以连续几次发生.
问题发生时,Firebug的控制台告诉我以下一个或两个:
ReferenceError:未定义jQuery
ReferenceError:$未定义
$(document).ready(function(){
(有时候:TypeError:$(".tablesorter").tablesorter不是函数)
当一切正常加载时,控制台为空白.
我的头文件加载在CMS的所有页面上,以:
<?php ob_start(); ?>
<!DOCTYPE html>
<html>
<head>
<meta name="robots" content="noindex">
<title><?=$pg_title." - ".$site_name;?> | Lucid <?=$ver_num;?></title>
<link href="/favicon.gif" rel="icon" />
<link rel="stylesheet" href="css/styles.php" type="text/css" />
<script src="js/jquery-1.8.3.min.js" async></script>
<script src="plugins/jquery-tablesorter/js/jquery.tablesorter.min.js" async></script>
<script src="plugins/jquery-tablesorter/js/jquery.metadata.js" async></script>
<script src="plugins/jquery-tablesorter/addons/pager/jquery.tablesorter.pager.min.js" async></script>
<script src="js/picnet.table.filter.min.js" async></script>
</head>
然后在页脚文件中,我调用各种函数:
<script async>
$(document).ready(function(){
function validateNumber(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode == 8 || event.keyCode == 46
|| event.keyCode == 37 || event.keyCode == 39) {
return true;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
};
$('[class=sort-order]').keypress(validateNumber);
$(".tablesorter").tablesorter({
textExtraction: 'complex'
});
var options = {
filterDelay: 100,
clearFiltersControls: [$('.filter-clear')]
};
$('.tablesorter').tableFilter(options);
$('input:not(.filter)').live("change", function () {
window.onbeforeunload = function () { return "Your changes have not been saved, if you leave the page you'll lose them" };
});
});
</script>
</body>
</html>
<?php
ob_flush();
?>
我知道这是一个相当普遍的问题,但我觉得我已经尝试了所有的解决方案(包括这里列出的那些:JQuery - $未定义)
我已经尝试使用setTimeout来延迟加载除jQuery之外的所有脚本长达一秒钟 - 没有帮助.
我已经尝试检查jQuery是否用if(jQuery)定义 - 它总是如此.
Firebug的Net选项卡向我显示jQuery文件的状态为304 Not Modified,无论问题是否已发生.
据我所知,我的所有拼写和语法都很好,应该给出它在大多数情况下都能正常工作.
我试过从外部网站而不是本地加载jQuery - 没有区别.
我应该指出,我正在使用XAMPP在本地开发CMS,而不是远程服务器,所以我认为这可能与我的apache配置有关.然后我将所有内容上传到远程服务器,发现问题更严重,这表明它与加载页面的速度有关,也许是异步？但是我不知道在加载任何脚本之前我还能做些什么来确保jQuery加载...
该async属性的script元素意味着,HTML的解析可以继续脚本下载和评估之前.这意味着后续的脚本元素不能依靠以前的已被评估-这意味着你的jQuery后加载jQuery插件失败,因为jQuery尚未加载.
特别:
<script src="js/jquery-1.8.3.min.js" async></script>
告诉浏览器你想要那个脚本,但不要等待它.然后:
<script src="plugins/jquery-tablesorter/js/jquery.tablesorter.min.js" async></script>
说同样的话.这会设置一个竞争条件,这两个脚本元素不再有任何顺序,因此有时第二个会被评估.由于第二个需要jQuery,因此失败.
要修复它,您需要删除该async属性.如果你的目标是让页面更快地呈现,而不是等待脚本,那么将所有脚本移到最后body(例如,之前</body>).但请注意,这可能意味着用户在事件处理程序连接之前尝试与页面交互的短暂时刻.
| 归档时间： |
|
| 查看次数： |
9433 次 |
| 最近记录： |