Question

我在JQuery Mobile中尝试了多页面模板，但它无法正常工作，我还希望在第二页中添加一个功能。那也没发生。在这里添加了源代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Admin Home</title>
    <script type="text/javascript" charset="utf-8" src="../js/cordova.js"></script>
    <script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../js/jquery.mobile.js"></script>
    <link rel="stylesheet" href="../../css/jquery.mobile.css" type="text/css"/>
    <link rel="stylesheet" href="../../css/style.css" type="text/css"/>

    <script>
        $("#NewWordPage").live( 'pageinit' , function (event) {
        $("#btnAdd").live( 'click',function(){
            var word=$('.Word').val();
            var explanation=$('.Explanation').val();
            var usage=$('.Usage').val();
            var tags=$('.Tags').val();
            alert("Check");
            if(word != "" && explanation != "" && usage != "" && tags != "")
            {
                        $.ajax({
                            url:"http://sample.in/DailyWord/New_Word.php?Word="+word+"&Explanation="+explanation+"&Usage="+usage+"&Tags="+tags,
                            type:"get",
                            datatype:"html",
                            success: function(response){    
                                    alert(response);
                                }
                            }
                        });
            }
            else
            {
                alert("Please all the mandatory fields...");
            }
        });
    });
        </script>
  </head>
  <body>
    <div data-role="page" id="MainPage">
        <div data-role="header" id="header">
        <div class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-home" id="Home" onclick="GoHome();">Home</div>
        <h4>Admin Home</h4>
        <div class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-gear" id="Options">Options</div>

        </div>
        <div data-role="content">
            <!-- Word Configuration Options -->
        <div data-role="collapsible" data-collapsed="false" data-theme="b">
        <h4>Word Options</h4>
            <ul data-role="listview">
                <li><a href="#NewWordPage" data-transition="slidedown">New Word</a></li>
                <li><a href="edit_word.html">Edit Word</a></li>
                <li><a href="delete_word.html">Delete Word</a></li>
            </ul>
        </div>

        <!-- Admin Options -->
        <div data-role="collapsible" data-collapsed="false" data-theme="b">
        <h4>Users List</h4>
            <ul data-role="listview">
                <li><a href="users.html">Users</a></li>
                <li><a href="block_user.html">Block User</a></li>
                <li><a href="feedback.html">Feedbacks</a></li>
                <li><a href="admin_request.html">Admin Rights Request</a></li>
                <li><a href="admin_rights.html">Admin Rights to User</a></li>
            </ul>
        </div>
        </div>

        <div data-role="footer" data-position="fixed" id="footer" ><h4><a href="http://sample.in/Mobile/">Sample</a></h4></div>
    </div>



    <!-- #####################################333 New word Page ################################### -->

    <div data-role="page" id="NewWordPage">
        <div data-role="header" id="header">
        <a href="#MainPage" data-transition="slideup" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-home" id="DashBoard">DashBoard</a>
        <h4>New Word</h4>
        </div>
        <div data-role="content">
        <form>
        <fieldset>
        <input type="text" name="Word" class="Word" id="text-basic" value="Word" onfocus="if (this.value == 'Word') this.value = '';" onblur="if (this.value == '') this.value = 'Word';">
        <textarea cols="40" rows="20" name="wordexp" class="Explanation" id="textarea" onfocus="if (this.value == 'Word Explanation') this.value = '';" onblur="if (this.value == '') this.value = 'Word Explanation';">Word Explanation</textarea>
        <textarea cols="40" rows="20" name="worduse" class="Usage" id="textarea" onfocus="if (this.value == 'Word Usage') this.value = '';" onblur="if (this.value == '') this.value = 'Word Usage';">Word Usage </textarea>
        <textarea cols="40" rows="5" name="tags" class="Tags" id="textarea" onfocus="if (this.value == 'Tags') this.value = '';" onblur="if (this.value == '') this.value = 'Tags';">Tags</textarea>
        <input type="button" value="Add Word" name="btnAddWord" id="btnAdd">
        <input type="reset" value="Reset" name="btnClear">
        </fieldset>
        </form>
        </div>
        <div data-role="footer" data-position="fixed" id="footer" ><h4><a href="http://sample.in/Mobile/">sample</a></h4></div>

    </div>
  </body>
</html>

#NewWordPage本身未重定向到该页面。请帮帮我。

Answer 1

这取决于您制作单页或多页文档。一些建议建议将所有必要的Javascript代码收集到一个文件中，然后在加载jQm之前在主文档的开头调用（包含）它。这种编码方式使代码可用于整个文档;如果你把JS代码放在某个页面中，那么只有那个页面会看到代码，有些则不会。

在JQuery Mobile中放置Javascript代码的位置？

1 个答案: