iOS jQueryで入力値が変更されず、 "addClass"呼び出しが失敗します

Question

iOS（iPhone 6 & 6s）で使用するとjQueryベースのスクリプトに問題があります。 ChromeとSafariでは同じように動作しますが、Chromeは実際にはiOSの場合はUIWebViewのラッパーであると考えられます。とにかく、これはシンプルな「星評価」システムです。ここではそれのための抜粋です：

;(function($){ 
 
    $(document).on('click', '.star-rating-input .star', function(){ 
 
     var self = $(this); 
 
     var rating = self.data('rating'); 
 
     
 
     self.addClass('selected'); 
 
     self.siblings('.star').removeClass('selected'); 
 
     self.siblings('input[type="hidden"]').val(rating); 
 
    }); 
 
})(jQuery);

// This is irrelevant here, the only thing to know is that .selected & :focus class makes all previous .star spans change representation using :before pseudo-selector and it works on all other browsers including WP IE.

<div class="star-rating-input"> 
 
    <span class="star " data-rating="5"></span> 
 
    <span class="star " data-rating="4"></span> 
 
    <span class="star " data-rating="3"></span> 
 
    <span class="star " data-rating="2"></span> 
 
    <span class="star " data-rating="1"></span> 
 
    <input type="hidden" name="star_rating" value=""> 
 
</div>

通常、それはうまく動作しますが、iOS版（iPhone 6と6秒のSafariとChromeの両方で、私はそれがiPhoneの他のバージョンにも適用されると仮定することができますあまりにも/ iOS版）：

• クリックスパンがフォーカスを失うまで、クラスは、その星は一時的に変化している（追加されません）
• 入力は、文字列/数値を期待したにもかかわらず、ポップでありますChrome DevToolsによるHTMLFragmentで逐次更新されます。

この問題の原因は何でしょうか？おそらく誰もがその問題の解決策を知っていますか？

Answer 1

私はこれについて完全にはわかりません。しかし、アンカー以外の要素（この場合は<span>）のクリックを検出しようとしているため、この問題に直面していると思います。以下のCSSを追加してみてくださいとiOS上でそれを確認してください。

.star{ 
    cursor:pointer; 
} 

Answer 2

代わりの

var rating = self.data('rating'); 

この行の後に関数が実行に失敗する方法を見て

var rating = self.attr('data-rating'); 

を試してみて、おそらく.dataのですiOSでは実際にはサポートされていません。試してみる価値がある。

EDIT：iOSで.dataが機能し、前述のようにclickイベントが正常に発生しませんでした。