jquery - 如何在 ios 上获取 jQuery 警报？

Question

来自 <span class="close">&times;</span> 的警报在计算机上的所有浏览器上都可以正常工作，但是在移动设备上不起作用...当我尝试在 iPhone 上运行该页面时，<span class="close">&times;</span>不发出任何警报。

我该如何解决这个问题？

		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

此解决方案使点击按钮移动友好。解决方法是在点击事件中定义touchstart。

$('.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>