javascript - jQuery .focus() 和 .blur() 在 Chrome 或 Safari 中不起作用

Question

我正在创建一个调查表，当用户关注每个问题和一组答案时，它需要突出显示(通过更改背景颜色)。 .focus() 和 .blur() 都适用于 Firefox 和 IE，但不完全适用于 Safari 和 Chrome。我还尝试了 .focusin() 和 .focusout()，结果相同。 编辑:点击不会触发焦点事件，但在输入字段中切换会触发焦点事件。我说不完全是因为它适用于文本输入、选择输入和文本区域输入；但不是单选和复选框输入。

$(document).ready(function()
 {
    $("form li").focusin(function()
  {
   $(this).addClass("over");
  }).focusout(function()
  {
     $(this).removeClass("over");
  });
 });

这被应用于与此类似的 html block :

<li>
    <label for="webmail" class="desc">Email</label>
    <input type="text" name="webmail" id="webmail" />
</li>
<li>
    <label for="business" class="desc">Purpose of your Charter Flight:</label>
    <div>
        <span>
            <input type="radio" name="purpose" id="business" class="radio" />
            <label class="choice" for="business">Business</label>
        </span>
        <span>
            <input type="radio" name="purpose" id="pleasure" class="radio" />
            <label class="choice" for="pleasure">Pleasure</label>
        </span>
    </div>
</li>

我试过摆弄开关，但我正在寻找一种更优雅的解决方案，该解决方案不涉及使用复杂的逻辑来使其工作。有什么想法吗？

Answer 1

很久以前我也遇到过这个问题，奇怪的是它是一个单选按钮让我很伤心。

尝试使用 jQuery.change()相反，这是我遇到的那个问题的一个工作示例

$("input#zendesk-dropbox-askedbefore, input#zendesk-dropbox-newhere").change(function() {
    $("label#zendesk-dropbox-label-askedbefore, label#zendesk-dropbox-label-newhere").toggleClass('zendesk-dropbox-label-highlight');
});

如果我对 ID 名称的疯狂使用还不清楚，input#zendesk-dropbox-askedbefore 和 input#zendesk-dropbox-newhere 都是单选按钮。