android - 使用 jQuery Mobile 在 iOS 和 Android 中的标签的子元素上不触发单击事件

Question

单击/点击按钮以动态地将新的复选框标签组添加到页面。在 <label> 中添加了复选框元素的可点击元素元素在移动设备上不可点击，但在桌面上查看时可点击。

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

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

预期行为(可以在桌面浏览器上正常工作):

点击/单击“添加属性”后 <a> ui-button，一个新的复选框项将出现在最后一个复选框下方，用户可以在其中输入自定义文本。在桌面浏览器上，“保存”<button>成功地将输入的文本“保存”在新的 ui-checkbox 项中。元素保存后，可以再次点击文本进行编辑或添加到条目中。

问题:

在移动设备(iOS 和 Android)上，<label> 中的两个元素带有点击监听器的元素不会触发——“保存”<button>和文字 <input> (保存后可以点击再次编辑文字)。

“删除”<a> (X)，适用于移动设备和桌面设备，可删除任何添加的复选框元素。这附加在 <label> 之后元素。 “保存”和input type="text"如果将可点击元素添加到标签之外的页面，则可正常工作，但这些元素——尤其是 <input type='text'> —需要是 <label> 的 child 适当布局的元素。

我怎样才能使 label 的 child 成为在移动设备上可点击/点击的元素？

Answer 1

It's now working

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

代替:

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

是这样的:

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