用css显示图像后Jquery移动页面消失答案

【问题标题】：Jquery mobile page disappear after image displayed with css用css显示图像后Jquery移动页面消失
【发布时间】：2014-12-05 13:35:45
【问题描述】：

我正在尝试在 Android 上使用 Jquery mobile 和 cordova 进行文件传输，

我用这个教程来练习： http://blog.revivalx.com/2014/05/03/tutorial-camera-cordova-plugin-for-ios-and-android/

选择图片后，成功调用该函数：

function onPhotoDataSuccess(imageURI) {
    navigator.notification.alert("onPhotoDataSuccess Image URI: "+imageURI, function() {});
    var cameraImage = document.getElementById('image');
    cameraImage.style.display = 'block';
    cameraImage.src = imageURI;
}

通知向我显示了好的文件 URI，所以我认为没问题，但是当应用程序返回 web 视图时，整个“页面”及其内容从屏幕上消失并出现另一个页面，这个页面是启动器页面在设备准备好之前一直显示，准备好后，我将页面更改为登录页面。

<div id="launcherPage" data-role="page" data-theme="b">
        <h1>Loading...</h1>
    </div>

所以我尝试使用此代码更改此功能：

function onPhotoDataSuccess(imageURI) {
    navigator.notification.alert("onPhotoDataSuccess Image URI: "+imageURI, function() {});
    $('#image').attr({
        src: imageURI,
        style: "display:block;width:100%;"
    });
}

但我有相同的结果，没有重复的 id，我真的不明白为什么会这样。

这里是html代码：

<div data-role="page" id="picture" data-theme="b">
    <div data-role="header">
        <h1>TEST</h1>
    </div><!-- /header -->
    <div data-role="content" data-theme="b">
        <form id="pictureForm">
            <button onclick="capturePhoto();">Capture Photo</button><br>
            <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button>
            <img id="image" src="" style="display:none;width:100%;">
            <label for="title">Title</label>
            <input data-clear-btn="true" name="title" id="title" value="" type="text">
            <input value="Continue" type="submit" id="adButton" onclick="uploadPhoto();">

        </form>
    </div><!-- /content -->
    <div data-role="footer" data-theme="b">
        <h4>TEST</h4>
    </div><!-- /footer -->
</div><!-- /page -->

编辑我注意到，当图像选择后显示LauncherPage时，如果我点击我的手机的后退按钮，它将正确显示图片页面，其中包含所选图像...

编辑 2 当我从 html 代码中评论 launcherPage 时，选择图片后，它会显示登录页面...

【问题讨论】：

标签： javascript android jquery css cordova

【解决方案1】：

我想出了解决方案，问题不是来自css，而是来自html：

我刚刚更改了这段代码：

<button onclick="capturePhoto();">Capture Photo</button>

到这里：

<a href="" class="ui-btn" onclick="capturePhoto();">Capture Photo</a>

不要使用 html 按钮标签，使用锚标签...不知道为什么，但这有效！！！

希望这会对某人有所帮助

【讨论】：