span 元素上的单击事件适用于桌面，但不适用于移动设备（jquery）

Question

span 元素上的单击事件会在桌面上触发，但不会在移动设备上触发。跨度是当前温度旁边的温度单位，一旦用户单击“获取天气”按钮，就会填充该温度单位。

这是与跨度单击事件相关的代码部分：

$(document).on('click', "span" , function(){
    var str=document.getElementById("tempUnits").innerHTML;
    if (str==="Celsius"){
      document.getElementById("tempUnits").innerHTML="Fahrenheit";
      $("#temp").html(tempC + '<span id="tempUnitsSpan"><strong> C </strong></span>' + " and " + weatherDescription);
    }

    else if (str==="Fahrenheit"){
      document.getElementById("tempUnits").innerHTML="Celsius";
          tempF=Math.max( Math.round((tempC*1.8+32) * 10) / 10, 2.8 ).toFixed(2);
        console.log(tempF);

      $("#temp").html(tempF + '<span id="tempUnitsSpan"><strong> F  </strong></span>' + " and " + weatherDescription);
    }

页

带代码的页面

Answer 1

我猜如果在移动设备上点击该元素两次，它就会起作用。要解决此问题，请添加 touchstart 事件。当触摸点放置在触摸表面上时，将触发 touchstart 事件。

$(document).on('click touchstart', "span" , function(){
}