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
