1

入力ボックスと送信ボタンを備えたフォームを動的に作成しようとしています。作成されるボックスの数は、選択メニューで選択した数です。問題は、フォームで動的に作成されたボタンをクリックするたびに 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";
        });
    });
4

2 に答える 2

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>
于 2013-09-07T12:35:41.023 に答える
0

$.mobile.changePage('#dialogchildren'); を使用してみてください。

于 2013-09-07T12:20:59.283 に答える