Dynamic jQuery Click Events Not Working In Mobile Safari

November 11, 2017 by Andreas Wik

I just ran into a really weird problem, appearing only in the Mobile Safari browser. I was testing a website on my iPad, and my jQuery click events did not work.

What I was doing was dynamically adding elements to the page. Then I also had a click event handler bound to the class of these added elements. Like this:

$(document).ready(function() {
 
  $('#button-container').append('<h3 class="btn working">WORKING</h3>');
  $('#button-container').append('<h3 class="btn not-working">NOT WORKING</h3>');
 
  $('body').on('click', '.btn', function() {
 
    $('#result').show();
    $('#result').fadeOut(1000);
  });
});

 

This works absolutely fine in all browsers except for Mobile Safari. It works if the element is an anchor or a button, but if you add, for example, a <h1> or a <p>, it breaks.

It turns out that the element must have the anchor attribute set to pointer in order for this to work.

So, adding this little piece to my CSS class solves it:

.headline {
    cursor: pointer;
}

 

Voila! Problem solved. Whether this is a bug or a conscious decision by Apple, I don’t know.

I put together an example or the so you can test it if you have a device with Mobile Safari nearby…

See the Pen Dynamic click events not working in Mobile Safari without cursor set to pointer by Andreas Wik (@andreaswik) on CodePen.

Share this article

Recommended articles

@awikio