Jquery 移动设备的复选框在 iOS 上使用 phonegap 更改触发两次（但在 Android 上工作）

Question

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

<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 被绑定了两次...所以复选框选中和取消选中...但我不明白为什么...

编辑：该事件在 iOS 上触发了两次，这是控制台输出（先选中然后取消选中...很奇怪！！）：

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

Answer 1

几个提示...

我在使用您使用的事件侦听器构造时遇到了很多麻烦，所以我只是这样做：

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

当然，尽管并不总是必要，但我会先打开 "off" 事件侦听器，然后再打开它们。这有助于防止我多次绑定到单个事件。

$('#welcome-page'.off('pagecreate'); $('#welcome-page'.on('pagecreate') function...

Answer 2

这似乎是 jQuery 移动版中的错误。我通过阻止点击的默认行为并手动切换输入检查值来解决它：

$(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 应用程序中却可以。这表明它可能也不适用于其他平台。

如果您的目标是多个平台，我建议您对这些平台使用旧的处理程序，并在处理程序中使用代码。

Answer 3

有同样的问题并通过删除 "label" 元素上的 "for" 属性解决了这个问题。

我的元素嵌套如下：

<label><input type="checkbox" id="opt1" data-mini="true" data-iconpos="right">Option label here</label>

猜测这是 jQuery Mobile 1.4.5（jQuery 1.11.1）中的错误。在我的例子中，复选框是分组的还是单个的都没有关系。

Jquery 移动设备的复选框在 iOS 上使用 phonegap 更改触发两次（但在 Android 上工作）

Jquery Mobile's checkboxes change firing twice with phonegap on iOS (but working on Android)

jquery-mobile

cordova