javascript - 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 上的 Safari 和 Chrome 中(iPhone 6 和 6s，我只能假设它也适用于其他版本的 iPhone/iOS):

• 没有添加类(所以星星只是暂时改变，直到点击 span 失去焦点)
• 根据 Chrome DevTools，尽管输入需要字符串/数字值，但会使用 HTMLFragment 进行填充。

知道是什么导致了这个问题吗？也许有人知道该问题的解决方案？

Answer 1

我对此不是很确定。但我认为你正面临这个问题，因为你试图检测对非 anchor 元素的点击(在本例中为 <span>)。尝试添加以下 CSS 并在 iOS 上检查它:

.star{
    cursor:pointer;
}