gpt4 book ai didi

表单提交上的 jquery mobile changePage 无法正常工作

转载 作者:行者123 更新时间:2023-12-01 06:24:16 27 4
gpt4 key购买 nike

我试图更改在 Jquery 中提交的表单上的页面,但是它不起作用。它会滑动以显示同一页面,而不是导航到目标页面。下面是代码。请问有什么见解吗?我也尝试使用 "#mainpage""index.html#mainpage" ,结果仍然相同。链接:jsfiddle.net/7yRph/1

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$('#launchpage').live('pagecreate',function(event) {
$('#fhome').submit( function () {
$.mobile.changePage("mainpage");
});
});
</script>
</head>
<body>

<!-- PAGE: launchpage -->
<div data-role="page" id="launchpage">
<div data-role="header">
<h1 data-theme="g" >Personal Details</h1>
</div><!-- /header -->

<div data-role="content" >
<div class="content-primary">
<form id="fhome" method="POST" >
<div data-role="none">
<p> Lets begin: </p>
</div>
<br/>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" >
<legend>Are you providing information about yourself?</legend>
<label for="launchradioyes">Yes</label>
<input type="radio" name="radio-choice" id="launchradioyes" value="yes" />
<label for="launchradiono">No</label>
<input type="radio" name="radio-choice" id="launchradiono" value="no" />
</fieldset>
</div>
<input type="submit" value="Next" data-theme="a" />
<br/>
</form>
</div><!-- /content -->

<div data-role="footer" data-theme="d">

</div><!-- /footer -->
</div><!-- /launch page -->

<!-- PAGE: mainpage -->
<div data-role="page" id="mainpage">
<div data-role="header">
<h1>Testing page navigation II</h1>
</div><!-- /header -->

<div data-role="content" >
<div class="content-primary">
<div data-role="none">
<label for="idprimary">ID:</label>
<input type="tel" name="idprimary" id="idprimary" value="" />
</div>
<br/>
</div><!-- /content -->

<div data-role="footer" data-theme="d">
</div><!-- /footer -->
</div><!-- /page one -->

</body>
</html>

最佳答案

您的表单标记中缺少操作属性。这通常会破坏浏览器中表单的功能。试试这个:

<form id="fhome" method="POST" action="mainpage">

无论如何,当您劫持提交操作时,它不应该对您的代码产生负面影响。

更新

此外,您错过了结束语 </form>标签和另一个结束</div>之后标记。

您需要使用提交按钮吗?使用按钮及其相应的点击事件可以吗?

http://jsfiddle.net/shanabus/7yRph/3/

更新 2,使用表单提交

解析结束标记后,添加 preventDefault方法调用和 data-ajax="false"属性如概述here in the docs .

示例:http://jsfiddle.net/shanabus/7yRph/9/

关于表单提交上的 jquery mobile changePage 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9009094/

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