javascript - Javascriptイベントリスナーはphonegapではなくブラウザで動作しますか?

Question

phonegap アプリケーションの jquery mobile で 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でも同様になります.

Answer 1

代わりにこれを $(document).bind('pageinit') ブロックに入れてみましたか?

Answer 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" に変更する必要がありました。