1

我是 html5 & js 的新手，我在开发jQuery Mobile 示例时遇到了一些麻烦。

From this, i'm just calling another header (partial) when a product is selected to render.

_header2.php：

<!DOCTYPE html>
<head> 
<title>h2: <?php echo $_GET['product']; ?> </title>
<meta charset="UTF-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
<link rel='stylesheet' href='assets/css/styles_mob.css'/>
<link rel='stylesheet' href='assets/css/styles.css' />
<link href='assets/css/jquery-mobile.css?<?php echo filemtime("assets/css/jquery-mobile.css");?>' type='text/css' rel='stylesheet' />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.min.js'></script>
<script type='text/javascript' src='http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js'></script>
</script>

<script type='text/javascript'>
function mymessage(msg)
{
if(!msg) msg="?";
alert(msg);
}

</script>

</head>

<body onload="mymessage('onload !')">


<div data-role="page" id="Home"> 
<div data-role="header" data-theme="b">
<a href="./" data-icon="home" data-iconpos="notext" data-transition="fade">Home</a>
<h1> <?php echo $title?></h1>
</div>

<div data-role="content">

标题代码在生成的页面上正确显示，但在 body 标记中调用mymessage()的 js不起作用。当我尝试从另一个部分代码（_product.php）调用它时，同样的问题：

<li><a href='#Gallery1' onClick='mymessage(\"press gallery\")' >...</li>

...concole 返回：referenceError：mymessage 未定义

一切都只有在刷新当前页面时才会摇滚！！

我骑过一些有类似问题的帖子（1、2、3 ），但我还是迷路了。

请问有什么想法吗？

4

2 回答 2

1

你错过了<html>标签。您还有一个额外的</script>结束标签。这可能会导致您的错误。

于 2012-08-21T21:59:19.303 回答
0

有各种奇怪的编码样式和错误，例如缺少<html>标记、额外的</script>结束标记、缺少锚点上的结束标记 in<li><a href='#Gallery1' onClick='mymessage(\"press gallery\")' >...</li>以及列表项应该在 inside <ul></ul>。

试试这个代码，它应该可以工作。然后分析并学习！

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>h2: <?php echo $_GET['product'];?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">

<link rel="stylesheet" type="text/css" href="assets/css/styles_mob.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<!-- this next line makes me wonder.. why?!  -->
<link rel="stylesheet" type="text/css" href="assets/css/jquery-mobile.css?<?php echo filemtime('assets/css/jquery-mobile.css');?>">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>

<script type="text/javascript">//<![CDATA[ 
function mymessage(msg){
    msg=msg||'?'; //the usual way to provide defaults
    alert(msg);
}

window.onload=function(){ //setting your onload event.
    mymessage('onload !');
};
//]]>  
</script>


</head><body>

<div data-role="page" id="Home"> 
<div data-role="header" data-theme="b">
<a href="./" data-icon="home" data-iconpos="notext" data-transition="fade">Home</a>
<h1><?php echo $title;?></h1>
</div>

<div data-role="content">  

<ul> <!-- Here is your link, working -->
    <li><a href="#Gallery1" onclick="mymessage('press gallery');">...</a></li>
</ul>

<!-- added some closing tags for demo-sake -->
</div></div>
</body></html>

PS：由于所有初学者错误以及这只是您代码的一部分这一事实，我强烈认为您的其余代码有如此奇怪的错误。

祝你好运！！

更新：
根据您希望在页面加载时完成的任务，jQuery Mobile 可能会彻底改变球场。
可以在 jQuery Mobile 的文档中阅读：

默认情况下，jQuery Mobile 中的所有导航都基于 location.hash 的更改和更新。只要有可能，页面更改将使用当前“页面”和下一个“页面”之间的平滑过渡，无论它已经存在于 DOM 中，还是通过 Ajax 自动加载。

文档中的另一个引用：

使用 $(document).bind('pageinit')，而不是 $(document).ready()

在 jQuery 中学习的第一件事是调用 $(document).ready() 函数中的代码，以便在加载 DOM 后立即执行所有内容。但是，在 jQuery Mobile 中，Ajax 用于在您导航时将每个页面的内容加载到 DOM 中，并且 DOM 就绪处理程序仅针对第一页执行。要在加载和创建新页面时执行代码，您可以绑定到 pageinit 事件。

这意味着所描述的常规技术只会在您第一次访问页面时触发，而不是在导航页面 ajax 样式时触发。

因此，在 jQuery mobile 中，您必须使用pageinit或文档中解释的适合您确切目的pageshow的其他事件之一。

示例如何为每个页面触发 pageinit（在您的网站上进行了现场测试）：

$(document).on('pageinit','[data-role=page]', function(){
    mymessage('hihi');    
});

或者，您也可以在 jQuery Mobile 中关闭 ajax，如下所示（取决于版本）：

$(document).bind("mobileinit", function(){
    $.mobile.ajaxEnabled = false;
});
于 2012-08-21T22:43:02.153 回答