cordova - Jquery Mobile 的复选框在 iOS 上使用 PhoneGap 更改触发两次(但在 Android 上工作)

Question

我在 JQM/Phonegap Build 应用程序中使用复选框。

<div id="wavetypes" class=ui-grid-b>
                    <div class=ui-block-a>
                        <input type="checkbox" name="checkbox-t-2a" id="wavetypes_checkboxsmallwave" data-theme="b">
                        <label for="wavetypes_checkboxsmallwave">Small-wave</label>
                    </div>
                    <div class=ui-block-b>
                        <input type="checkbox" name="checkbox-t-2b" id="wavetypes_checkboxperf" data-theme="b">
                        <label for="wavetypes_checkboxperf">Performance</label>
                    </div>
                    <div class=ui-block-c>
                        <input type="checkbox" name="checkbox-t-2c" id="wavetypes_checkboxstepup" data-theme="b">
                        <label for="wavetypes_checkboxstepup">Step-up</label>
                    </div>
                </div>

而我就是这样聆听他们的改变

$(document).on('pagecreate','#welcome-page', function(){    

$(document).on('change','#wavetypes_checkboxsmallwave, #wavetypes_checkboxperf, #wavetypes_checkboxstepup',function(){ 

    console.log('-------------------');
    console.log(e.target.tagName.toUpperCase()+' : ' + $(this).attr('id') +', is checked ? : '+$(this).is(":checked"));
    if (e.target.tagName.toUpperCase() === "LABEL") {
        return;
    }
        var proId = $('#chosenpro').find(":selected").val();
        var brandid = $('#chosenbrand').find(":selected").val();
        console.log(proId);
        console.log(brandid);
        if ( !$.isNumeric(proId) ) {
            console.log("proId is not numeric");
            if ( !$.isNumeric(brandid) ) {
                console.log("brandid is not numeric");
                //resetModelsListView(prodata, false, 0, 0, 0);
                //addBoardAndLogoInModelListView();

            } else {
                var targetbrand = prodata[brandid]['brand'];
                //resetModelsListView(prodata, false, 0, targetbrand, 0);
                //addBoardAndLogoInModelListView();
            }
        } else {
            console.log("proId IS numeric");
            var targetproName = prodata[proId]['name'];
            var targetbrand = prodata[brandid]['brand'];

            //LISTVIEW
            //resetModelsListView(prodata, false, 0, targetbrand, targetproName);
            //addBoardAndLogoInModelListView();
        }
    });

...但是当我在 Phonegap + iOS 上点击这些框时，这些框不会被选中。

它在桌面或 Phonegap + Android 上运行良好。

你能帮忙吗？

编辑:似乎js被绑定(bind)了两次...所以复选框选中并取消选中...但我不明白为什么...

编辑:该事件在 iOS 上被触发两次，这是控制台输出(它被检查然后取消检查......奇怪!!):

-------------------
INPUT : checkboxperf, is checked ? : true
-------------------
INPUT : checkboxperf, is checked ? : false

Answer 1

这似乎是 jQuery Mobile 中的一个错误。我通过阻止点击的默认行为并手动切换输入检查值来解决这个问题:

$(document).on('click', '.ui-checkbox', function (event) {
    event.stopPropagation();
    event.preventDefault();

    var $checkboxInput = $(this).find('input');
    var isChecked = $checkboxInput.is(':checked');
    $checkboxInput.attr('checked', !isChecked).checkboxradio('refresh');

    // do your stuff
});

我在 JSFiddle (Chrome) 和 iPhone 4S (iOS 8.1) 中对此进行了测试。该解决方案似乎不适用于浏览器，但在我的 iOS Phonegap 应用程序中却可以。这表明它也可能无法在其他平台上运行。

如果您的目标是多个平台，我建议您使用旧的处理程序，并在处理程序内创建一个代码函数。