jQuery .focus () и .blur () не работающий в Chrome или Safari

Я создаю форму обзора, которая должна иметь каждый вопрос и набор выделенных ответов (путем изменения цвета фона), когда пользователь фокусируется на них. .focus () и .blur () и работают в Firefox и IE, но не полностью в Safari и Chrome. Я также попробовал .focusin () и .focusout () с теми же результатами.Править: Нажатие не запускает событие фокуса, но снабжающий вкладками через поля ввода делает. Я говорю не полностью, потому что это работает на вводы текста, выберите исходные данные текстовой области и исходные данные; но не исходные данные радио-и флажка.

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

Это применяется к блокам HTML, подобного этому:

<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>

Я пытался бездельничать с переключателями, но я ищу более изящное решение, которое не включает использующую замысловатую логику, чтобы заставить его работать. Какие-либо идеи?

10
задан Eric 27 July 2010 в 22:01
поделиться

2 ответа

Я думал об этом по дороге домой вчера вечером и разобрался сам. Возможно, это не самое элегантное решение, но оно определенно работает.

$(document).ready(function()
    {
       $("textarea, input, select, .radio, .checkbox").click(function()
        {
            $("form li.over").toggleClass("over");
            $(this).parents("li").toggleClass("over");
        });
    });

В любом случае спасибо!

1
ответ дан 4 December 2019 в 04:00
поделиться

Я тоже столкнулся с этой проблемой давным-давно, и, как ни странно, меня огорчил именно переключатель.

Попробуйте вместо этого использовать 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');
});

На случай, если из моего безумного использования имен идентификаторов неясно, введите # zendesk-dropbox -askedbefore & input # zendesk-dropbox-newhere оба переключателя.

3
ответ дан 4 December 2019 в 04:00
поделиться
Другие вопросы по тегам:

Похожие вопросы: