我在 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
最佳答案
这似乎是 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 应用程序中却可以。这表明它也可能无法在其他平台上运行。
如果您的目标是多个平台,我建议您使用旧的处理程序,并在处理程序内创建一个代码函数。
关于cordova - Jquery Mobile 的复选框在 iOS 上使用 PhoneGap 更改触发两次(但在 Android 上工作),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28678093/