Search code examples
javascriptaddeventlisteneriphone-web-apptouchstart

iOS Safari: touchstart doesn't fire on dynamically inserted element

I'm working on an web app for iOS Safari. I've got a search input with an autocompletion/suggestions list below it. With javascript I add the suggestions to the list:

document.getElementById('selector_autocomplete').innerHTML
 += '<span ontouchstart="selector_select(' + i + ');">' + name + '</span><br />';

Now the problem is that the ontouchstart doesn't seem to get fired when touching the element.

I've tested it with console.log(); etc. But nothing happens.

How can I get it to work?

Solution

  • The ontouchstart="" attribute does not add a listener to the node when inserted into the DOM. Only at the first load of the page.

    Using addEventListener('touchstart', ...); on the items after inserting them is the solution here.