javascript - 导航到 jQuery Mobile 对话框不起作用

Question

我只是想动态地创建一个带有输入框和提交按钮的表单。创建的框数是在选择菜单中选择的数量。问题是每次我单击表单中名为 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>

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

score 2 · Accepted Answer

解决方案

只需更改此：

$("#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>

score 0 · Accepted Answer

0

尝试使用 $.mobile.changePage('#dialogchildren');

于 2013-09-07T12:20:59.283 回答

javascript - 导航到 jQuery Mobile 对话框不起作用

2 回答 2

解决方案

工作示例：

Related

Reference