使用 jQuery 移动设备时，iOS 和 Android 中标签的子元素未触发点击事件

Question

一个按钮是 clicked/tapped 动态添加一个新的复选框标签组到页面。在 <label> 元素内添加了复选框元素的可点击元素在移动设备上不可点击，但在桌面设备上查看时可点击。

Codepen 上的示例： http://codepen.io/clehnert-psl/pen/ByqxmY/

（点击屏幕底部的“1x”以便在手机上更好地显示）

预期行为（可以在桌面浏览器上正常工作）：

在 tapping/clicking "Add attribute" <a> ui 按钮之后，一个新的复选框项将出现在最后一个复选框项下，用户可以在其中输入自定义文本。在桌面浏览器上，"Save" <button> 成功 "saves" 在新的 ui-checkbox 项中输入的文本。项目保存后，可以再次点击文本进行编辑或添加到条目中。

问题：

在移动设备上（iOS 和 Android），<label> 元素中带有点击侦听器的两个元素不会触发 — "save" <button>和文本<input>（保存后可以点击再次编辑文本）。

"Delete" <a> (X)，适用于移动设备和桌面设备，用于删除任何添加的复选框项目。它附加在 <label> 元素之后。如果将 "Save" 和 input type="text" 可点击元素添加到标签外的页面，它们都可以正常工作，但是这些项目——尤其是 <input type='text'>——需要是 <label> 元素的子元素正确布局。

如何在移动设备上制作 label 元素的子元素 clickable/tappable？

Answer 1

It's now working

除了绑定相关元素的点击事件外，它就像绑定到 touchstart 事件一样简单。

而不是：

$(document).on('click', '.ui-checkbox > label > input:text', function (e){...}

是这个：

$(document).on('click touchstart', '.ui-checkbox > label > input:text', function (e){...}

Answer 2

回应CCL。

为了避免在同时使用 click 和 touchstart 时连续触发函数两次，请尝试类似的操作：

var preventDoubleFire = Date.now();
$( document ).on( 'click touchstart', '.selector', function( e ) {
    var millis = Date.now();
    if ( millis - preventDoubleFire < 200 ) return;
    preventDoubleFire = millis;
    // your code here
} );

使用 jQuery 移动设备时，iOS 和 Android 中标签的子元素未触发点击事件

Click event not firing on child elements of label in iOS and Android using jQuery Mobile

html

css

android

ios

jquery-mobile