logo标签列表

$(document).ready函数不会触发

javascripthtmljquery-mobilejquery
3
我正在构建一个由多个jquery mobile页面组成的项目，每个页面都有一个导航栏。
当我查看每个页面时，$(document).ready函数正常启动，但是当我通过导航栏进入页面时，它不会启动。在Chrome调试器中，我只能看到一个HTML页面（我当前正在查看的页面）在源文件夹中。
当我刷新页面时，函数可以正常工作。
尝试将"$(document).ready(function () {"替换为：
"$("div[data-role*='page']").live('pageshow', function(event, ui) {"，如某人所建议的那样，
但这也不起作用。
这是我加载的第一页。
<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title>

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" /> 
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <link href="css/TableCSSCode.css" rel="stylesheet" type="text/css" />

    <script>

        $(document).ready(function () {



            $.ajax({
                type: "POST",
                url: "getdata.aspx/return_member_list",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function (res) {

                    var parsedData = JSON.parse(res.d);
                    var tableStr = "<table class='CSSTableGenerator'>";

                    $.each(parsedData, function () {
                        tableStr += "<tr><td>" + this.fName + "</td><td>" + this.lName + "</td></tr>";
                    });
                    tableStr += "</table>";
                    $('#tableDiv').html(tableStr);


                },
                error: function (res, msg, code) {
                    // log the error to the console
                    alert("The following error occured: " + msg + " " + code);
                } //error

            });

        });


    </script>


</head> 
<body>
       <div id="page1" data-role="page" data-theme="a">

            <div data-role="header" data-theme="a">
                <h1>חברי העמותה</h1>
            </div> 

            <div data-role="navbar">
                <ul>
                    <li><a href="index.htm">חברי העמותה</a></li>
                    <li><a href="build.htm">בניית צוות</a></li>
                    <li><a href="test.htm"> בדיקה</a></li>
                </ul>
            </div>

            <div data-role="content">
                <div id="tableDiv"></div>
            </div>

            <div data-role="footer">
                <h1>footer area</h1>
            </div>
    </div>


</body>
</html>

以下是第二和第三页的标题： build.htm：

<head> 
    <title>My Page</title>

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" /> 
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <link href="css/TableCSSCode.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

        function save_crew()
        {

            p_num = new Object();
            p_num.p1 = p1.value;
            p_num.p2 = p2.value;
            p_num.p3 = p3.value;
            p_num.p4 = p4.value;

            l_num = new Object();
            l_num.l1 = l1.value;
            l_num.l2 = l2.value;
            l_num.l3 = l3.value;


            s_num = new Object();
            s_num.s1 = s1.value;
            s_num.s2 = s2.value;
            s_num.s3 = s3.value;



            var photo = { 'p1': p_num.p1, 'p2': p_num.p2, 'p3': p_num.p3, 'p4': p_num.p4 };
            var light = { 'l1': l_num.l1, 'l2': l_num.l2, 'l3': l_num.l3, 'l4': l_num.l4 };
            var sound = { 's1': s_num.s1, 's2': s_num.s2, 's3': s_num.s3, 's4': s_num.s4 };

            // Put the object into storage
            localStorage.setItem('photo', JSON.stringify(photo));
            localStorage.setItem('light', JSON.stringify(light));
            localStorage.setItem('sound', JSON.stringify(sound));

            // Retrieve the object from storage
            var retrievedObject = localStorage.getItem('sound');

            var ro = JSON.parse(retrievedObject);

            alert(ro.s2);

            window.location.href="test.htm";

        }



    </script>


</head>

test.htm:

<head> 
    <title>My Page</title>

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" /> 
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <link href="css/TableCSSCode.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

        $(document).ready(function () {

            var sound_RO = localStorage.getItem('sound');
            var photo_RO = localStorage.getItem('photo');
            var light_RO = localStorage.getItem('light');

            sound_RO = JSON.parse(sound_RO);
            photo_RO = JSON.parse(photo_RO);
            light_RO = JSON.parse(light_RO);

            $.each(sound_RO, function (index, value) {
                alert(value);
            });

            $.ajax({
                type: "POST",
                url: "getdata.aspx/return_prof",
                data: "{prof:'צלם'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function (res) {

                    var parsedData = JSON.parse(res.d);





                    $('[data-role="content"]').append('<div id="collapsible-set" data-role="collapsible-set"></div>');
                    $("#collapsible-set").append('<div id="collapsible" data-role="collapsible"></div>');
                    $("#collapsible").append('<h3>צלמים </h3>');

                    for (i = 0; parsedData[i] != null; i++) {

                        $("#collapsible").append('<p>' + parsedData[i].fName + ' ' + parsedData[i].lName + '</p>');

                    }

                    $('[data-role="content"]').trigger('create');







                },
                error: function (res, msg, code) {
                    // log the error to the console
                    alert("The following error occured: " + msg + " " + code);
                } //error

            });

        });




    </script>


</head>
重要的是要意识到 document.ready 已经在主页面中发生，因此来自 ajax 的代码将立即触发。它不会等待任何随后加载的 HTML。 - charlietfl
你尝试过使用$.mobile.changePage()来在页面之间导航吗？ - Omar
1个回答
9

原因

当jQuery Mobile在初始页面之后（通过ajax）加载其他页面时，它只会加载BODY内容，这意味着在HEAD中初始化的任何js或css文件（如果它没有在第一个加载的HTML中初始化）将被忽略。因此，所有自定义的js代码都将不会执行。

解决方案

将所有js代码移动到第一个HTML文件中

您应该创建一个新的js文件，将其命名为任何您想要的名称。将所有js代码（来自每个页面）放入其中。然后在第一个HTML文件中初始化它以进行加载。

将您的js代码移动到页面BODY中

简单地打开每个页面并将其javascript代码从HEAD移动到BODY。由于此原因，javascript代码将被加载到DOM中，并在显示页面时执行。

最后的思考

我在我的另一篇答案/文章中更详细地描述了所有这些内容+示例：为什么我必须将所有脚本放在jquery mobile的index.html中

您还应该考虑切换到jQuery Mobile页面事件而不是document ready。文档准备通常可以正确工作，但有时它会在页面加载到DOM之前触发。这就是为什么必须使用jQM页面事件的原因。它们将确保在页面安全加载到DOM之后才触发页面内容。要了解更多信息，请查看此答案/文章：jQuery Mobile：document ready vs page events

谢谢您的回答。我将每个页面的脚本都移动到了body标签内（在所有元素之前）。第一页可以正常工作，但在build.htm页面中，它无法识别我的build_crew()函数...而且第三页的代码也无法执行。您所说的第二种方法是指我应该在外部js文件中构建函数，将该文件包含在我的index.htm头部。但是如果我希望它们随着每个页面的加载而加载，那么我应该从哪里调用它们呢？ - Dvirski
首先告诉我你是如何在build.html中初始化build_crew()函数的？如果你将它们放在一个单独的index.js文件中，那么你需要使用jQM页面事件来进行初始化。这里我给你做了一个例子，看一下：http://jsfiddle.net/Gajotres/8hKe2/ - Gajotres
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接