我只是试图动态创建一个带有输入框和提交按钮的表单。创建的框数是在选择菜单中选择的数量。问题是每次我点击我的表单中的动态创建的按钮被调用转到步骤3我没有导航到我的对话框，我不知道为什么不。真的很感激任何帮助。这是我的代码：
<div id ="steptwo" data-role="page" data-theme="a">
<div data-role ="header">
<h1> </h1>
</div>
<div data-role = "content">
<center>
<p>This is step two of four. We require at this stage information about the cars you drive for our new system. Please select the number of cars you own in the list below:</p>
<select id="carcount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="NumberOfCars">
</div>
</center>
</div>
</div>
<div id ="diaglogchildren" data-role="dialog" data-theme="a">
<div data-role="header">
<h3>Do you have any children?</h3>
</div>
<div data-role = "content">
<center>
<input type="submit" id ="ChildrenYes" name="ChildrenYes" value="Yes" data-theme="a">
<br>
<input type="submit" id ="ChildrenNo" name="ChildrenNo" value="No" data-theme="a">
</center>
</div>
</div>
我的JavaScript：
$(document).on("pageinit","#steptwo",
function()
{
$("#carcount").change(function()
{
$("#NumberOfCars").empty();
var stringbuild = '';
for (var i = 0; i < $("#carcount").val(); i++)
{
stringbuild = stringbuild + '<input type="text" id="car' + i + '" name="carmake" placeholder="Please enter Vehicle ' + (i+1) + ' Make"><input type="text" id="car' + i + '" name="carreg" placeholder="Please enter Vehicle ' + (i+1) + ' Registration Number">';
};
stringbuild = '<form name="CarOnwerDetails" action="#" method="post">' + stringbuild + '<input type="submit" id="CarSubmit" name="CarSubmit" value="Go to Step 3" data-theme="a"></form>';
alert(stringbuild);
$("#NumberOfCars").append(stringbuild).trigger("create");
});
$("#CarSubmit").click(function(e)
{
e.preventDefault();
window.location.href = "#diaglogchildren";
});
});
答案 0 :(得分：2)
只需改变一下：
$("#CarSubmit").click(function(e) {
e.preventDefault();
window.location.href = "#diaglogchildren";
});
到此：
$(document).on("click","#CarSubmit", function(e){
e.preventDefault();
window.location.href = "#diaglogchildren";
});
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div id ="steptwo" data-role="page" data-theme="a">
<div data-role ="header">
<h1> </h1>
</div>
<div data-role = "content">
<center>
<p>This is step two of four. We require at this stage information about the cars you drive for our new system. Please select the number of cars you own in the list below:</p>
<select id="carcount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="NumberOfCars">
</div>
</center>
</div>
</div>
<div id ="diaglogchildren" data-role="dialog" data-theme="a">
<div data-role="header">
<h3>Do you have any children?</h3>
</div>
<div data-role = "content">
<center>
<input type="submit" id ="ChildrenYes" name="ChildrenYes" value="Yes" data-theme="a"/>
<br/>
<input type="submit" id ="ChildrenNo" name="ChildrenNo" value="No" data-theme="a"/>
</center>
</div>
</div>
</body>
<script>
$(document).on("pageinit","#steptwo", function(){
$("#carcount").change(function(){
$("#NumberOfCars").empty();
var stringbuild = '';
for (var i = 0; i < $("#carcount").val(); i++)
{
stringbuild = stringbuild + '<input type="text" id="car' + i + '" name="carmake" placeholder="Please enter Vehicle ' + (i+1) + ' Make"><input type="text" id="car' + i + '" name="carreg" placeholder="Please enter Vehicle ' + (i+1) + ' Registration Number">';
};
stringbuild = '<form name="CarOnwerDetails" action="#" method="post">' + stringbuild + '<input type="submit" id="CarSubmit" name="CarSubmit" value="Go to Step 3" data-theme="a"></form>';
alert(stringbuild);
$("#NumberOfCars").append(stringbuild).trigger("create");
});
/*$("#CarSubmit").click(function(e) {
e.preventDefault();
window.location.href = "#diaglogchildren";
});*/
$(document).on("click","#CarSubmit", function(e){
e.preventDefault();
window.location.href = "#diaglogchildren";
});
});
</script>
</html>
答案 1 :(得分：0)
尝试使用$ .mobile.changePage（'＃dialogchildren'）;