Clicking a span element within an input on iOS

Question

I have this input field and HTML.

events: 
  'click #js-clear': 'clearSearch'

clearSearch: (e) ->
  e.preventDefault()

  @$("#js-query").val("")
  @$("#js-clear").hide()

And javascript:

<form accept-charset="UTF-8" action="/" method="get">
  <input name="utf8" type="hidden" value="✓">
  <input id="js-query" name="query" placeholder="Filter by name" type="text">
  <span id="js-clear">X</span>
</form>

When I click the "X" button in Chrome on my desktop, I can trigger events bound on it such as clearing the input.

When I click the "X" button in Chrome on iOS, the events aren't triggered.

How do I get the events to fire?

Answer 1

Adding the event listener touchstart fixed this.