A button is clicked/tapped to dynamically add a new checkbox label group to the page. The clickable elements added with the checkbox elements inside the <label> element are not tappable on mobile, but they are clickable when viewed on desktop.
Example on Codepen: http://codepen.io/clehnert-psl/pen/ByqxmY/
(click "1x" at the bottom of the screen for better display on mobile)
Intended behaviour (can be seen working properly on a desktop browser):
After tapping/clicking the "Add attribute" <a> ui-button, a new checkbox item will appear under the last one where custom text can be entered by the user. On desktop browsers, the "Save" <button> successfully "saves" the entered text in the new ui-checkbox item. After the item is saved, the text can again be clicked to edit or add to the entry.
The problem:
On mobile (iOS and Android), the two elements inside the <label> element with click listeners do not fire — the "save" <button> and the text <input> (which can be clicked after it is saved to again edit the text).
The "Delete" <a> (the X), works on both mobile and desktop to delete any added checkbox items. This is appended after the <label> element. Both the "Save" and input type="text" clickable elements work properly if added to the page outside the label, but these items—especially the <input type='text'>—need to be children of the <label> element for proper layout.
How can I make the children of the label element clickable/tappable on mobile?
It was as simple as binding to the touchstart event in addition to the click event for the elements in question.
Instead of:
$(document).on('click', '.ui-checkbox > label > input:text', function (e){...}
It's this:
$(document).on('click touchstart', '.ui-checkbox > label > input:text', function (e){...}