iOS：事件之后的jQuery addClass仅在另一次点击后显示

Question

目前，我在iOS设备上使用jQuery点击事件时遇到了一个非常奇怪的问题。我制作了一个包含一些div元素的地图，它可以显示圆形按钮和工具提示，见下文：

<figure class="map">
  <div data-city="amsterdam">
    <div class="tooltip">
        Amsterdam
        <span class="arrow"></span>
    </div>
    <span></span>
  </div>
</figure>

地图中的每个城市都会重复div data-city属性relative。 通过CSS我在地图上使用absolute添加了样式和位置，在div上添加了var city = $('div[data-city]'); city.on('click', function() { $('input[name="city"]').val( $(this).data('city') ); city.removeClass('active'); $(this).addClass('active'); }); 。

使用jQuery我在每个div上添加了点击事件。正如您所看到的，我还将data-city属性添加到隐藏的输入中（因为它正在插入数据库中）。

active

单击div并添加display: block类后，将显示div，因为活动类包含div而不是display：none。这看起来如下：

现在真正的问题： 这在我的笔记本电脑上完全正常，但在我的移动设备（带有iOS 9的iPhone 6）上，点击工作不顺畅。单击active时，将填充隐藏的输入并添加.trigger()类。然而，活动状态（变为浅绿色并显示工具提示）未显示。出于某种原因，它只会在我在图中的某个地方点击另一个时间 后显示 ，但不会显示在div上。

我尝试过多种方法，例如删除CSS3转换，禁用悬停事件（在桌面上悬停事件等于活动状态），尝试其他事件（mousedown和tap）并触发jQuery {{ 1}}超时后..但遗憾的是似乎没有任何工作

我找不到关于这个问题的任何内容，所以希望有人对此很熟悉。感谢您的帮助。