iOS jQuery 无法更改输入值并且“addClass”调用失败

Posted 2023-03-12

【中文标题】iOS jQuery 无法更改输入值并且“addClass”调用失败

【英文标题】：iOS jQuery fails to change input value and "addClass" call fails

【发布时间】：2017-04-04 12:05:30

【问题描述】：

在 ios（iPhone 6 和 6s）上使用基于 jQuery 的脚本时遇到问题。它在 Chrome 和 Safari 中的行为方式相同，但我相信这是因为 Chrome 实际上是 iOS 的 UIWebView 的包装器。无论如何，这是一个简单的“星级”系统。这是它的sn-p：

;(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。

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

【参考方案1】：

我对此并不完全确定。但我认为你正面临这个问题，因为你试图检测对非锚元素的点击（在这种情况下为<span>）。尝试添加以下 CSS 并在 iOS 上进行检查：

.star
    cursor:pointer;

【讨论】：

我根本不相信它会起作用，但还是尝试了它，结果让我大吃一惊——它起作用了。

【参考方案2】：

而不是

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

试试

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

看看这行之后的函数是如何执行失败的，也许iOS中并不真正支持.data。值得一试。

编辑：.data 确实在 iOS 中工作，并且如前所述，点击事件未正确触发。

【讨论】：

对不起，我没有尝试你的解决方案，因为标记为正确的解决方案，这也意味着 iOS 支持 .data()

好吧，在我发帖时，您在该解决方案下的评论是它没有任何区别，所以我假设您尝试过。因此，我假设触发了点击事件，.data 有时不如 .attr 可靠。

我明白了，很抱歉，在我意识到我一直在测试旧版本而没有进行更改后，我立即删除了此评论！对困惑感到抱歉。事实是它有效，我还将您的答案标记为有用，因为它得出结论 .data() 确实适用于 iOS（也许您可以将其作为编辑添加到您的答案中，以使其明确）。