jQuery/JavaScript在启用jQuery Mobile的网页上的子页面上不工作_Javascript_Jquery_Jquery Mobile

jQuery/JavaScript在启用jQuery Mobile的网页上的子页面上不工作

javascript jquery jquery-mobile

jQuery/JavaScript在启用jQuery Mobile的网页上的子页面上不工作,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,我在jQuery移动网站的标题中有一个图像，我会自动调整它的大小，这样它就会填满屏幕。在我的页面上有一个子页面用于登录用户。但在此页面上，图像的大小调整将不起作用当我在谷歌上搜索一个解决方案时，我已经发现这是由jQuery Mobile造成的，它只允许jQuery在第一个data role=“page”div中工作。但是当我尝试每个解决方案时，它们似乎都不起作用你们能帮我找到解决办法吗我的代码（在一个简短的复制/粘贴示例中）：你为什么不工作？ window.onresize=函数（事件

我在jQuery移动网站的标题中有一个图像，我会自动调整它的大小，这样它就会填满屏幕。在我的页面上有一个子页面用于登录用户。但在此页面上，图像的大小调整将不起作用

当我在谷歌上搜索一个解决方案时，我已经发现这是由jQuery Mobile造成的，它只允许jQuery在第一个data role=“page”div中工作。但是当我尝试每个解决方案时，它们似乎都不起作用

你们能帮我找到解决办法吗

我的代码（在一个简短的复制/粘贴示例中）：


你为什么不工作？
window.onresize=函数（事件）{
调整图像大小（）；
}
window.onload=函数（事件）{
调整图像大小（）；
}            
函数resizeimage（）{
var img=document.getElementById（'headerimage'）；
var oldwidth=img.naturalWidth；
var oldheight=img.自然高度；
var newwidth=$（窗口）.width（）；
var newheight=oldheath/oldwidth*newwidth；
img.width=新宽度；
img.height=新高度；
}
内容#1
页脚
内容#2
页脚

仍在寻找解决方案…

首先，不要混合使用普通javascript和jQuery

您的问题是，您有两个页面具有两个相同的标题图片。其中的Bot被加载到DOM中，并且您的函数总是访问第一个，即第一页中的图片

您将需要一点jQuery和jQuery Mobile来完成这项工作

与此相反：

    var img = document.getElementById('headerimage');

使用以下命令：

    var img = $.mobile.activePage.find('#headerimage');

编辑：

工作示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>WHY DON'T YOU WORK?</title>
        <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>
        <script>
            window.onresize = function (event) {
                resizeimage();
            }

            window.onload = function (event) {
                resizeimage();
            }    

            $(document).on('pageshow', '[data-role="page"]', function(){ 
                resizeimage();       
            });

            function resizeimage() {
                var img = $.mobile.activePage.find('#headerimage');//document.getElementById('headerimage');

                var oldwidth = img.naturalWidth;
                var oldheight = img.naturalHeight;

                var newwidth = $(window).width();
                var newheight = oldheight / oldwidth * newwidth;

                img.width(newwidth);
                img.height(newheight); 

                $(window).trigger( "throttledresize" );             
            }
        </script>
    </head>

    <body>
        <div class="PageDiv" data-role="page" data-add-back-btn="true" id="FrontPage">

            <div class="HeaderDiv" data-role="header" data-position="fixed">
                <img id="headerimage" name="headerimage" src="http://www.azhumane.org/wp-content/uploads/2012/06/AHS025_mastSM_21-11.png" />
            </div>

            <div class="ContentDiv" data-role="content" data-theme="a">
                CONTENT #1
                <a href="#LoginPage">LoginPage</a>
            </div>

            <div class="FooterDiv" data-role="footer" data-position="fixed">
                <h3>FOOTER</h3>
            </div>
        </div>

        <div class="PageDiv" data-role="page" data-add-back-btn="true" id="LoginPage">

            <div class="HeaderDiv" data-role="header" data-position="fixed">
                <img id="headerimage" name="headerimage" src="http://www.azhumane.org/wp-content/uploads/2012/06/AHS025_mastSM_21-11.png" />
            </div>

            <div class="ContentDiv" data-role="content" data-theme="a">
                CONTENT #2
                <a href="#FrontPage">FrontPage</a>
            </div>

            <div class="FooterDiv" data-role="footer" data-position="fixed">
                <h3>FOOTER</h3>
            </div>
        </div>
    </body>
</html>


你为什么不工作？
window.onresize=函数（事件）{
调整图像大小（）；
}
window.onload=函数（事件）{
调整图像大小（）；
}    
$（文档）。在（'pageshow'，'data role=“page”]'上，函数（）{
调整图像大小（）；
});
函数resizeimage（）{
var img=$.mobile.activePage.find（'headerimage'）；//document.getElementById（'headerimage'）；
var oldwidth=img.naturalWidth；
var oldheight=img.自然高度；
var newwidth=$（窗口）.width（）；
var newheight=oldheath/oldwidth*newwidth；
img.宽度（新宽度）；
img.高度（新高度）；
$（window.trigger（“throttledresize”）；
}
内容#1
页脚
内容#2
页脚

代码建议：

$（window）.on（'load resize'，resizeimage）

我不同意第一个说法，但第二个说法完全正确。最好用一个例子来说明如何用类和pageInit事件来解决这个问题。他的解决方案是在jQuery Mobile$.Mobile.activePage selector中。只有一个问题，resizeImage方法也需要在pageInit上调用，因为pageInit不会触发窗口加载或调整大小事件。伙计们，这个解决方案不起作用，我更改了代码，标题不再调整大小，这是因为你仍然在使用javascript，就像什么都没发生一样。当您最终设置高度和宽度时，您的操作就像对经典javascript对象所做的一样。它必须像jQuery对象一样完成。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>WHY DON'T YOU WORK?</title>
        <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>
        <script>
            window.onresize = function (event) {
                resizeimage();
            }

            window.onload = function (event) {
                resizeimage();
            }    

            $(document).on('pageshow', '[data-role="page"]', function(){ 
                resizeimage();       
            });

            function resizeimage() {
                var img = $.mobile.activePage.find('#headerimage');//document.getElementById('headerimage');

                var oldwidth = img.naturalWidth;
                var oldheight = img.naturalHeight;

                var newwidth = $(window).width();
                var newheight = oldheight / oldwidth * newwidth;

                img.width(newwidth);
                img.height(newheight); 

                $(window).trigger( "throttledresize" );             
            }
        </script>
    </head>

    <body>
        <div class="PageDiv" data-role="page" data-add-back-btn="true" id="FrontPage">

            <div class="HeaderDiv" data-role="header" data-position="fixed">
                <img id="headerimage" name="headerimage" src="http://www.azhumane.org/wp-content/uploads/2012/06/AHS025_mastSM_21-11.png" />
            </div>

            <div class="ContentDiv" data-role="content" data-theme="a">
                CONTENT #1
                <a href="#LoginPage">LoginPage</a>
            </div>

            <div class="FooterDiv" data-role="footer" data-position="fixed">
                <h3>FOOTER</h3>
            </div>
        </div>

        <div class="PageDiv" data-role="page" data-add-back-btn="true" id="LoginPage">

            <div class="HeaderDiv" data-role="header" data-position="fixed">
                <img id="headerimage" name="headerimage" src="http://www.azhumane.org/wp-content/uploads/2012/06/AHS025_mastSM_21-11.png" />
            </div>

            <div class="ContentDiv" data-role="content" data-theme="a">
                CONTENT #2
                <a href="#FrontPage">FrontPage</a>
            </div>

            <div class="FooterDiv" data-role="footer" data-position="fixed">
                <h3>FOOTER</h3>
            </div>
        </div>
    </body>
</html>