Javascript事件监听器在浏览器中工作，而不是在phonegap中？答案

【问题标题】：Javascript event listener works in browser, not in phonegap?Javascript事件监听器在浏览器中工作，而不是在phonegap中？
【发布时间】：2012-07-29 19:43:58
【问题描述】：

我正在 jquery mobile 中为 phonegap 应用程序编写一个带有 RGB 滑块的颜色选择器。它在浏览器中工作，但在推送到手机时不起作用（使用phonegap/eclipse）。我不知道如何使用 phonegap 获得 javascript 控制台反馈，所以我有点不知所措。

我已尝试将“.on .change .live .bind”用于更改事件侦听器，我可以在浏览器中使用所有这些侦听器，但在 phonegap 应用程序中却没有。

下面是它的样子：

这里是javascript：

$(function () {
$("#red, #green, #blue").change(function () {
    var red = $("#red").val();
    var green = $("#green").val();
    var blue = $("#blue").val();
    var redp = Math.round((red * 100) / 255);
    var greenp = Math.round((green * 100) / 255);
    var bluep = Math.round((blue * 100) / 255);
    $('#redrgb').html(red);
    $('#greenrgb').html(green);
    $('#bluergb').html(blue);
    $('#redpercent').html(redp + "%");
    $('#greenpercent').html(greenp + "%");
    $('#bluepercent').html(bluep + "%");
    $("#swatch").css("background-color", "rgb(" + red + "," + green + "," + blue + ")");
    console.log(red);  });  });

这里是 HTML

<div id="colorpicker">
    <div id="swatch">
        <div class="rgb swatchtext" id="redrgb">255</div><div class="percent swatchtext" id="redpercent">100%</div>
        <div class="rgb swatchtext" id="greenrgb">140</div><div class="percent swatchtext" id="greenpercent">55%</div>
        <div class="rgb swatchtext" id="bluergb">60</div><div class="percent swatchtext" id="bluepercent">24%</div>
    </div>
    <div class="rgbslider" id="sliderred"><input type="range" class="rgbsliders" id="red" value="255" min="0" max="255" /></div>
    <div class="rgbslider" id="slidergreen"><input type="range" class="rgbsliders" id="green" value="140" min="0" max="255" /></div>
    <div class="rgbslider" id="sliderblue"><input type="range" class="rgbsliders" id="blue" value="60" min="0" max="255" /></div>
</div>

我正在使用 JQuery-Mobile、phonegap，现在我正在 android 上进行测试，但一旦我开始使用它，它也会在 iOS 上运行。

【问题讨论】：

jquery mobile 和 phonegap 的对比是什么？
所有内容的最新版本：JQuery 1.7.2、JQueryMobile 1.1.1、Cordova 2.0.0。我昨晚刚下载了所有东西。

标签： javascript android jquery jquery-mobile cordova

【解决方案1】：

您是否尝试过将其放在 $(document).bind('pageinit') 块中？

【讨论】：

我将如何实现它？我对 JQuery Mobile 的差异有点迷茫。
是的，我已经读了几遍了，但我仍然无法让它发挥作用。
实际的滑块会移动，只是不会改变样本颜色或样本中的 RGB 值。

【解决方案2】：

这行得通！！！！

$(function () {
$("#red, #green, #blue").slider({
    create: function (event, ui) {
        $(this).bind('change', function () {
            var red = $("#red").val();
            var green = $("#green").val();
            var blue = $("#blue").val();
            var redp = Math.round((red * 100) / 255);
            var greenp = Math.round((green * 100) / 255);
            var bluep = Math.round((blue * 100) / 255);
            $('#redrgb').html(red);
            $('#greenrgb').html(green);
            $('#bluergb').html(blue);
            $('#redpercent').html(redp + "%");
            $('#greenpercent').html(greenp + "%");
            $('#bluepercent').html(bluep + "%");
            $("#swatch").css("background-color", "rgb(" + red + "," + green + "," + blue + ")");
            console.log(red);
        });}});});

我不得不在 html 输入中将 type="range" 更改为 type="text"。

【讨论】：