Navigation to the jQuery Mobile dialog box does not work

advertisements

I'm simply trying to dynamically create a form with input boxes and a submit button. The number of boxes created is the amount selected in the select menu. The problem is every time I click on the dynamically created button in my form Called Go to Step 3 I don't navigate to my dialog and I have no clue why not. Any help would really be appreciated. Here is my code:

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

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


Solution

Just change this:

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

to this:

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

Working example:

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