Question

I have an application that requires the “ontouchstart” attribute to be added to each and every anchor in order to have the anchor:active CSS state to work on iOS devices.

Trouble is that the entire application loads content via AJAX after the DOM has already loaded, which means any $(selector).attr('ontouchstart','') call will only work on the initial screen, not content added later via AJAX.

Because each screen is being loaded by separate functions (in some cases being constructed by the function itself) I would like to find a solution that allows a single jQuery or JavaScript call that applies to all anchors, even those added after the DOM is loaded rather than going through each and every function and adding in the call individually (there are hundreds of them).

Is this even possible? Any help would be greatly appreciated.

Answer 1

You could try the DOMNodeInserted event:

$(document).bind('DOMNodeInserted', function(event) {
  if (event.target.nodeName == 'A') {
    $(event.target).attr('ontouchstart','');
  }
});

The event itself will fire when any type of node is added to the DOM, the code just tests the node name (tag) and adds the attribute.