Javascript 导航到jQuery Mobile对话框不工作

我只是尝试用输入框和提交按钮动态创建一个表单。创建的框数是在“选择”菜单中选择的数量。问题是，每次我点击表单中名为Go to Step 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>

这是第二步，共四步。在这个阶段，我们需要关于我们新系统中您驾驶的汽车的信息。请在下面的列表中选择您拥有的汽车数量：

1.
2.
3.
4.
5.
6.
7.
8.
9
10
你有孩子吗？

我的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";
        });
    });

$（document）.on（“pageinit”、“#step2”，
函数（）
{ 
$（“#carcount”）.change（函数（）
{
$（“#NumberOfCars”）.empty（）；
var stringbuild=''；
对于（var i=0；i<$（“#carcount”）.val（）；i++）
{
stringbuild=stringbuild+“”；
};
stringbuild=''+stringbuild+''；
警报（stringbuild）；
$（“#NumberOfCars”）.append（stringbuild.trigger（“create”）；
});
$（“#提交”）。单击（功能（e）
{
e、 预防默认值（）；
window.location.href=“#DialogChildren”；
});
});

尝试使用$.mobile.changePage（“#dialogchildren”）

解决方案 只要改变这个：

$("#CarSubmit").click(function(e) {
    e.preventDefault();
    window.location.href = "#diaglogchildren";
});

为此：

$(document).on("click","#CarSubmit", function(e){
    e.preventDefault();
    window.location.href = "#diaglogchildren";
});    

工作示例：

jQM复杂演示
这是第二步，共四步。在这个阶段，我们需要关于我们新系统中您驾驶的汽车的信息。请在下面的列表中选择您拥有的汽车数量：

1.
2.
3.
4.
5.
6.
7.
8.
9
10
你有孩子吗？


$（document）.on（“pageinit”，“#step2”，function（）{
$（“#carcount”）.change（函数（）{
$（“#NumberOfCars”）.empty（）；
var stringbuild=''；
对于（var i=0；i<$（“#carcount”）.val（）；i++）
{
stringbuild=stringbuild+“”；
};
stringbuild=''+stringbuild+''；
警报（stringbuild）；
$（“#NumberOfCars”）.append（stringbuild.trigger（“create”）；
});
/*$（“#提交”）。单击（功能（e）{
e、 预防默认值（）；
window.location.href=“#DialogChildren”；
});*/
$（文档）。在“单击”上，“提交”，功能（e）{
e、 预防默认值（）；
window.location.href=“#DialogChildren”；
});    
}); 

非常感谢您！我的方式不起作用有什么特别的原因吗？是的，jQuery Mobile不喜欢经典的点击绑定。如果可能的话（在99.9%的情况下应该是这样），可以像我的情况一样使用延迟事件绑定。这是一个相当长的话题，我不会在这里详细描述它，但几天后我会写一篇关于这个话题的博客文章，我会把它贴在这里让你们看一看。

<!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>