附加到复选框的点击事件在移动浏览器中不起作用

Question

我需要你的帮助。我很难得到在移动设备上工作的事件处理程序

https://github.com/jquery/jquery-mobile/issues/8017

附加到 Checkbox/Radio 项目的点击事件在桌面浏览器中有效，但在移动浏览器中无效。

我有这段代码在浏览器上运行良好，但在移动设备上无法捕获事件

$(document).on('click', '.ui-checkbox-off', function (event, data) {
alert('ss');
});

$(document).on('click', '.ui-checkbox-on', function (event, data) {
alert('ss');
});

在复选框选中和取消选中时调用，如此 fiddle

所示

http://jsfiddle.net/cod7ceho/34/

但是在移动设备上使用时不会捕获此事件

（我正在生成上面的 HTML 动态）并且我正在使用 trigger.create 和 updatelayout 也

谁能告诉我为什么他们没有被手机捕获

为了您的参考，我正在创建 HTML，如图所示 fiddle

http://jsfiddle.net/cod7ceho/35/

如果有任何问题，请告诉我。

Answer 1

尝试利用 touchstart 事件

$(document).on('touchstart click', '.remove', function (e) {
    $("#addonsWrap").find("label.ui-checkbox-on").trigger('click', [1]);
});


$(document).on('touchstart click', '.ui-checkbox-off', function (event, data) {
    if(data !== undefined) return;

    var cost = $(this).data('cost');
    var totalcost = parseFloat($('.totalcost').text());
    totalcost = totalcost + cost;
    $('.totalcost').text(totalcost)
});


$(document).on('touchstart click', '.ui-checkbox-on', function (event, data) {

    if(data !== undefined) return;
    alert('ss');
    var cost = $(this).data('cost');
    var totalcost = parseFloat($('.totalcost').text());
    totalcost = totalcost - cost;
    $('.totalcost').text(totalcost)
});

jsfiddle http://jsfiddle.net/cod7ceho/41/

Answer 2

虽然它可能依赖于浏览器，但实际上它在移动设备上对我来说效果很好。然而，接近 click 的移动设备是 touchend 那么

怎么样

$(document).on('click touchend', '.ui-checkbox-off', function (event, data) {
alert('ss');
});

$(document).on('click touchend', '.ui-checkbox-on', function (event, data) {
alert('ss');
});

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events

附加到复选框的点击事件在移动浏览器中不起作用

Click event attached to Checkbox doesn't work in mobile browser

jquery

jquery-mobile