gpt4 book ai didi

html - JQuery Mobile 菜单(切换)问题

转载 作者:行者123 更新时间:2023-11-28 08:27:29 25 4
gpt4 key购买 nike

我正在使用 JQuery Mobile 继续我的探索,但我遇到了一个新问题。我创建了一个使用 JQuery toggle 的小型 JQuery 幻灯片菜单。

             $( "#TestMenu" ).toggle( "slow", function() {});

所发生的是整个脚本运行良好。直到,我点击一个链接并加载一个页面。即使页面具有相同的内容。

当我按 F5 时,菜单再次正常工作。我知道 Jquery Mobile 已经完成了加载。因此,我认为这就是问题所在。

但是如何解决这个问题。我不知道。

我创建了一个小测试用例来隔离问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test &amp; Go</title>
<meta name="viewport" content="width=1080, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<link href="interface/test/mobile.theme.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
///########-------------------------------------------------------------
///########-------------------------------------------------------------
///######## FUNCTION TO LOAD ALL QUICKHANDLING OPTIONS
///########-------------------------------------------------------------
///########-------------------------------------------------------------
function TestAndGoFunctions(){
///########-------------------------------------------------------------
///########-------------------------------------------------------------
///######## HANDLING : CHANGE THE PAYMENT
///########-------------------------------------------------------------
///########-------------------------------------------------------------
$("body").on("click", "#TestMenuButton", function() {
///######## TOGGLE THE DISPLAY STATE OF THE MENU
$( "#TestMenu" ).toggle( "slow", function() {});
});
}


$(document).ready(function() {
///######## LOAD THE Test AND GO FUNCTIONALITY
TestAndGoFunctions();
});

</script>
</head>
<body>
<div id="TestMenuButton"></div>
<div id="TestMenu">
<ul>
<li><a href="?page=start">Start</a></li>
<li><a href="?page=actions">Actions</a></li>
</ul>
</div>
<div id="testBlock">
VARIABLE = <?php echo @$_GET['page']; ?>
</div>
</body>
</html>

我试图创建一个 JSfiddle 链接.. 但这并不是 100% 有效,因为它不想重新加载我的页面,所以我无法在那里显示错误。尽管如此,这里还是链接:

https://jsfiddle.net/ferencik/xucrhvhr/

我已经编辑了 jquery 代码以尝试自动加载内容。但还没有成功。

在我的代码下面:

        <script type="text/javascript">
///########-------------------------------------------------------------
///########-------------------------------------------------------------
///######## FUNCTION TO LOAD ALL QUICKHANDLING OPTIONS
///########-------------------------------------------------------------
///########-------------------------------------------------------------
function TestAndGoFunctions(){
///########-------------------------------------------------------------
///########-------------------------------------------------------------
///######## HANDLING : CHANGE THE PAYMENT
///########-------------------------------------------------------------
///########-------------------------------------------------------------
$("body").on("click", "#TestMenuButton", function() {
///######## TOGGLE THE DISPLAY STATE OF THE MENU
$( "#TestMenu" ).toggle( "slow", function() {});
});
}

$(document).on("pageshow", function( event ) {
TestAndGoFunctions();
});

$(document).ajaxComplete(function(){
///######## LOAD THE Test AND GO FUNCTIONALITY
///TestAndGoFunctions();
});

$(document).ready(function() {
///######## LOAD THE Test AND GO FUNCTIONALITY
///TestAndGoFunctions();
});


function TestClick(){
$( "#TestMenu" ).toggle( "slow", function() {});
alert("HI!!");
}

</script>

我希望有人能告诉我我做错了什么!

最佳答案

这是因为 jquery mobile 通过 ajax 加载新页面,所以基本上 ready 函数不会“再次加载”。

阅读:http://demos.jquerymobile.com/1.1.0/docs/api/events.html并阅读:Difference between jQuery and jQuery Mobile?

关于html - JQuery Mobile 菜单(切换)问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28474586/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com