Question

我正在使用JQuery Mobile开发一个Web应用程序（版本1.3.0）。如果只有一个HTML文件，我可以将“pageshow”事件绑定到页面div：

<!DOCTYPE HTML>
<html>
<head>
    <title>Funil de Vendas</title>
    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script src="lib/jquery-1.8.2.min.js"></script>
    <script src="lib/jquery.mobile-1.3.0.min.js"></script>

    <script>
        var nice = false;
        $(document).ready( function(){
            $("#other_page").bind('pageshow',function() {
                alert('The page was called!');
            });     
        });
    </script>       
</head>
<body>
        <div data-role="page" class="Page" id="home_page">
            <div data-role="content">
                <a data-role="button"  href="#other_page" data-inline="true" style="width:300px;">Iniciar</a>
            </div>
        </div>
    </div>  

    <div data-role="page" class="Page" id="other_page">
        <div data-role="content">
            ...
        </div>
        ...
        ...
        ...
    </div>
</body></html>

如何使用多个HTML文件执行相同操作。我无法绑定到页面，因为这个div在另一个HTML文件中。

<div data-role="page" class="Page" id="home_page">
    <div data-role="content">
        <a data-role="button"  href="other_page.html" data-inline="true" style="width:300px;">Iniciar</a>
    </div>
</div>

提前致谢！

Answer 1

这里有两种可能的方式：

第一个解决方案。如果您使用多个HTML文件，并且所有这些文件都加载了ajax（这是一种标准的jQuery Mobile页面加载方式）。在这种情况下，所有的javascript都必须加载到第一个html文件中，因为jQM只会加载其他html文件的BODY内容。

示例：

index.html：

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script>
                $(document).on('pagebeforeshow', '#index', function(){       
                        alert('This is a first page!');
                    });

                    $(document).on('pagebeforeshow', '#second', function(){       
                        alert('This is a second page!');                
                    }); 
        </script>
    </head>
    <body>
        <div data-role="page" id="index" data-theme="b">
            <div data-role="header" data-theme="a">
                <h3>First page</h3>
            </div>

            <div data-role="content">
                        <a data-role="button" id="some-btn" href="second.html">Open next page</a>                        
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

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

second.html：

    <div data-role="page" id="second" data-theme="b">
        <div data-role="header" data-theme="a">
            <h3>Second page</h3>
        </div>

        <div data-role="content">
                This is a second page
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>

第二个解决方案。如果您有多个HTML文件，但所有页面都链接到具有rel =＆＃34; external＆＃34;属性或ajax在应用程序级别上启用。在这种情况下，每个html页面都必须有自己的HEAD和BODY。每个页面都必须有自己的javascript。

示例：

index.html：

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script>
                $(document).on('pagebeforeshow', '#index', function(){       
                        alert('This is a first page!');
                    });
        </script>
    </head>
    <body>
        <div data-role="page" id="index" data-theme="b">
            <div data-role="header" data-theme="a">
                <h3>First page</h3>
            </div>

            <div data-role="content">
                        <a data-role="button" id="some-btn" href="second.html" rel="external">Open next page</a>                         
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

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

second.html：

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script>
                    $(document).on('pagebeforeshow', '#second', function(){       
                        alert('This is a second page!');                
                    }); 
        </script>
    </head>
    <body>
        <div data-role="page" id="second" data-theme="b">
            <div data-role="header" data-theme="a">
                <h3>Second page</h3>
            </div>

            <div data-role="content">
                    This is a second page
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

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

如何使用JQuery Mobile绑定外部HTML文件的事件“pageshow”

1 个答案:

示例：

示例：