Question

除非我手动刷新页面，否则我在底部的Javascript中执行的代码操作不会发生。有什么方法可以防止这种情况吗？如果没有，如何在加载页面后立即动态刷新页面？谢谢你的帮助！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Universal Travel Flights</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="css/my.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <script type="text/javascript" src="js/form_validation.js"></script>
    <script src="js/cordova-2.5.0.js"></script>
</head>
<body>
    <div data-role="page" id="passenger">
        <div data-theme="a" data-role="header">
            <h3>
            </h3>
        </div>
        <div data-role="content">
            <div data-role="navbar" data-iconpos="top">
                <ul>
                    <li>
                        <a href="index.html" data-transition="fade" data-theme="" class="ui-btn-active ui-state-persist">
                            Book
                        </a>
                    </li>
                    <li>
                        <a href="deals.html" data-transition="fade" data-theme="">
                            Deals
                        </a>
                    </li>
                    <li>
                        <a href="contact.html" data-transition="fade" data-theme="">
                            Contact
                        </a>
                    </li>
                </ul>
            </div>
            <form id="inputform" name="inputform" method="get" action="payment.html">
                <input type="hidden" name="flightID" id="flightID" />
                <div data-role="collapsible-set" id="passengers">

                </div>
                <br/>
                <input type="submit" value="Continue" data-theme="b" data-icon="arrow-r" data-iconpos="right"/>
            </form>
            <a data-role="button" data-transition="fade" data-theme="c" href="details.html" data-icon="arrow-l" data-iconpos="left">
                Back
            </a>
          </div>
        <div data-theme="a" data-role="footer">
            <h3>
            </h3>
        </div>
    </div>
    <script>
    $( document ).on( "pageinit", "#passenger", function() {
        var arrArgs = location.search.substring(1).split("&");
        document.getElementById("flightID").value = arrArgs[2].substring(arrArgs[2].indexOf("=")+1);
        var text = "";

        for(var i = 0; i < arrArgs[0].substring(arrArgs[0].indexOf("=")+1); i++)
        {
            text += "<div data-role='collapsible' data-collapsed='false'><h4>Adult</h4><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" +
            "<input name='fname' id='fname' placeholder='First name*' value='' type='text' class='required'/></fieldset></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" +
            "<input name='mname' id='mname' placeholder='Middle name' value='' type='text' /></fieldset></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>"+
            "<input name='lname' id='lname' placeholder='Last name*' value='' type='text' class='required'/></fieldset></div><div data-role='fieldcontain'><select name='gender' data-mini='true' id='gender' class='required'>" +
            "<option value=''>Gender*</option><option value='female'>Female</option><option value='male'>Male</option></select></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" +
            "<input name='dob' id='dob' placeholder='Date of Birth (mm/dd/yyyy)*' value='' type='text' class='required'/></fieldset></div></div>";
        }

        for(var i = 0; i < arrArgs[1].substring(arrArgs[1].indexOf("=")+1); i++)
        {
            text += "<div data-role='collapsible' data-collapsed='false'><h4>Child</h4><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" +
            "<input name='fname' id='fname' placeholder='First name*' value='' type='text' class='required'/></fieldset></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'>" +
            "<input name='mname' id='mname' placeholder='Middle name' value='' type='text' /></fieldset></div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'><input name='lname' id='lname' placeholder='Last name*' value='' type='text' class='required'/>" +
            "</fieldset></div><div data-role='fieldcontain'><select name='gender' data-mini='true' id='gender' class='required'><option value=''>Gender*</option><option value='female'>Female</option><option value='male'>Male</option></select>" +
            "</div><div data-role='fieldcontain'><fieldset data-role='controlgroup' data-mini='true'><input name='dob' id='dob' placeholder='Date of Birth (mm/dd/yyyy)*' value='' type='text' class='required'/></fieldset></div></div>";
        }

        document.getElementById("passengers").innerHTML = text;

    });
    </script>
</body>
</html>

Answer 1

好的，我想我弄清楚了......用这个包裹你的剧本：

<script>$(document).ready(function( ...Place all that code in here...


); <<<you need to close it.
</script>

应该这样做。

除非页面刷新，否则jQuery Mobile内容不会出现

1 个答案: