How to get jQuery alert on ios?

Question

The alert from <span class="close">&times;</span> works fine on all browsers on a computer, however does not work on a mobile device ... When i try to run the page on the iPhone, the <span class="close">&times;</span> does not give any alert.

How can I fix this?

  var closebtns = document.getElementsByClassName("close"); var i; for (i = 0; i < closebtns.length; i++) { closebtns[i].addEventListener("click", function() { alert("X was clicked"); }); } 

  body {font-family: sans-serif;} input { font-size: 1em; } /* prevent zoom in mobile */ ul { list-style-type: none; padding: 0; margin: 0; } ul li { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block; position: relative; min-height: 1em; z-index: 999; max-width: 360px; } ul li:hover { background-color: #eee; } /* sortable plugin styles when dragged */ .dragged { position: absolute; opacity: 0.5; z-index: 2000; } li.placeholder { position: relative; background: purple; } .close { cursor: pointer; position: absolute; top: 50%; right: 0%; padding: 12px 16px; transform: translate(0%, -50%); z-index: 99999; } .close:hover {background: #bbb;} 

 <div id="sort-it"> <ul> <li>This is item #1<span class="close">&times;</span></li> <li>This is item #2<span class="close">&times;</span></li> <li>This is item #3<span class="close">&times;</span></li> <li>This is item #4<span class="close">&times;</span></li> <li>This is item #5<span class="close">&times;</span></li> </ul> </div> 

Answer 1

Hereby the solution to make the click on the button mobile friendly . The solution is to define touchstart in the click event.

$('.close').on('click touchstart', function(e)

 $(document).ready(function() { $('.close').on('click touchstart', function(e) { e.stopPropagation(); e.preventDefault(); alert($(this).closest('li').attr('id')); }); }); 

  body {font-family: sans-serif;} input { font-size: 1em; } /* prevent zoom in mobile */ ul { list-style-type: none; padding: 0; margin: 0; } ul li { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block; position: relative; min-height: 1em; max-width: 360px; } ul li:hover { background-color: #eee; } /* sortable plugin styles when dragged */ .dragged { position: absolute; opacity: 0.5; z-index: 2000; } li.placeholder { position: relative; background: purple; } .close { cursor: pointer; position: absolute; top: 50%; right: 0%; padding: 12px 16px; transform: translate(0%, -50%); background: #fff; } .close:hover {background: #bbb;} 

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <div id="sort-it"> <ul> <li id="ID_1">This is item #1<button class="close">&times;</button></li> <li id="ID_2">This is item #2<button class="close">&times;</button></li> <li id="ID_3">This is item #3<button class="close">&times;</button></li> <li id="ID_4">This is item #4<button class="close">&times;</button></li> <li id="ID_5">This is item #5<button class="close">&times;</button></li> </ul> </div>