显示扫描数据角色 = 页面上的条形码，使用 jquery mobile

Question

我尝试用cordova做一个条码扫描器，一直运行良好，但是我用jquery mobile后扫描结果没有出现在页面上？

这是我的 HTML

<div data-role="page" id="home">
    <div data-role="header">
        <h1>Home</h1>
    </div>

    <div data-role="main" class="ui-content">
        <p>
            <button id="startScan">Start Scan</button>
        </p>
    </div>
</div>

<div data-role="page" id="results">
    <div data-role="header">
        <h1>Reslut</h1>
    </div>

    <div data-role="main" class="ui-content">
        <div id="results"></div>
    </div>
</div>

javascript

    document.addEventListener("deviceready", init, false);
    function init() {
        document.querySelector("#startScan").addEventListener("touchend", startScan, false);
        resultDiv = document.querySelector("#results");
    }

    function startScan() {

        cordova.plugins.barcodeScanner.scan(
            function (result) {
                var s = "Result: " + result.text + "<br/>" +
                "Format: " + result.format + "<br/>" +
                "Cancelled: " + result.cancelled;
                resultDiv.innerHTML = s;
            },
            function (error) {
                alert("Scanning failed: " + error);
            }
        );

    }

Answer 1

您有 2 个 ID 为 result 的 div，ID 应该是唯一的。我会将带有data-role="page" 的div 的ID 更改为pageResults。

另外，您必须更改到结果页面显示结果。

试试这个：

$("mobile-pagecontainer" ).pagecontainer( "change", "#results") 在该结果 div 上设置 innerHTML 之前。

Pagecontainer change docs