jQuery on click not working on iPhone (touch devices)

Question

Can anyone please explain to me why this is working in the browser but not on mobile devices like Apple's iPhone. On iPhone, I never get the hello from the alert. Why?

<div class="close">
  Click here
</div>

JS:

$(document).on('click', '.close', function() {
  alert('hello');
});

Example here: https://jsfiddle.net/27ezjrqr/5/

Answer 1

By default, divs are not a "clickable" elements. But adding cursor: pointer; makes iOS treat it as clickable.

So all you need to do is add

.close {
    cursor: pointer;
}

to your CSS and then it will work.

Proof here: https://jsfiddle.net/27ezjrqr/6/

$(document).on('click', '.close', function() {
  alert('hello');
});

.close {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="close">
  Click here
</div>

Answer 2

I used the touchstart event with the click , it did the job for me

 $(document).on("click touchstart tap", "#button_X", function (){
//your code here      
 });