jQuery blur () не работает?

Тут совсем запутался. Попытка чего-то довольно простого, но это не работает:

$("input.input1, textarea.input1").focus(function(){
    $(this).addClass("input2").removeClass("input1");
});
$("input.input2, textarea.input2").blur(function(){
    $(this).addClass("input1").removeClass("input2");
});

В основном размытие не срабатывает. Я нажимаю на поле ввода, и поле меняется. Я нажимаю вдали от поля, и ничего не происходит. Любая помощь с этим была бы потрясающей.


blur jquery
person 3Dom    schedule 28.11.2011    source источник
comment
какие-нибудь подсказки в firebug? какую версию jquery вы используете?   -  person alonisser    schedule 28.11.2011

Ответы (5)


arrow_upward
15
arrow_downward

Вам нужно использовать делегированный обработчик, так как вход не имеет класса input2 во время применения обработчика.

$(document).on('focus','input.input1, textarea.input1', function() {
    $(this).addClass('input2').removeClass('input1');
});
$(document).on('blur','input.input2, textarea.input2', function() {
    $(this).addClass('input1').removeClass('input2');
});

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

$('.needsToggle').on('focus blur', function() {
     $(this).toggleClass('input1 input2');
});

Если у них всегда есть класс input1 для начала, вы можете использовать его вместо needsToggle.

person tvanfosson    schedule 28.11.2011
comment
Потрясающе, спасибо. Не могу поверить, что никогда раньше не сталкивался с этой проблемой. - person 3Dom; 28.11.2011
comment
Это действительно странно. Это исправило мою проблему, раньше я пытался $(".inputelem").on("blur", function() {});. Это не сработало для меня, хотя то же самое для фокусировки работало нормально. Однако, когда я попробовал это: $(document).on("blur", ".inputelem", function() {});, это сработало нормально. В чем разница между $(document).on("blur",".inputelem", function() {}); и $("inputelem").on("blur", function() {}); - person SexyBeast; 13.04.2017
comment
@SexyBeast разница в том, что последний применяется только к существующим элементам, и если элемент удален и воссоздан, его необходимо повторно применить. Первый применяется на уровне документа (который всегда будет существовать), но вызывается только в том случае, если целевой элемент соответствует фильтру. Событие должно пройти весь путь до документа, прежде чем обработчик события будет отфильтрован и применен. Примечание: селектор может быть чем-то другим, кроме документа, но это должно быть что-то, что не заменяется в DOM. - person tvanfosson; 13.04.2017
comment
Страннее тогда. Мой элемент находится на странице с самого начала и никогда не удалялся. Тем не менее это не работает. - person SexyBeast; 13.04.2017
comment
@SexyBeast - возможно ли, что обработчик применяется до завершения загрузки страницы? Его следует применять внутри обработчика готовности документа и/или в нижней части тела. - person tvanfosson; 13.04.2017
comment
Да, это обрабатывается внутри $(function() {}). - person SexyBeast; 14.04.2017

arrow_upward
3
arrow_downward

Поскольку вы воздействуете на одни и те же элементы, связать несколько проще:

$("input.input1, textarea.input1").focus(function(){
    $(this).addClass("input2").removeClass("input1");
}).blur(function(){
    $(this).addClass("input1").removeClass("input2");
});

демонстрация JS Fiddle.

Что касается того, почему ваш jQuery не работает как есть, я не уверен, боюсь; хотя я подозреваю, что это связано с селекторами.

person David says reinstate Monica    schedule 28.11.2011

arrow_upward
1
arrow_downward

Попробуйте этот код:

$("input.input1, textarea.input1").bind('focus blur', function(){
    $(this).toggleClass("input2").toggleClass("input1");
});

Если это не работает, вам может понадобиться использовать focusout вместо blur:

$("input.input1, textarea.input1").bind('focus focusout', function(){
    $(this).toggleClass("input2").toggleClass("input1");
});
person Blender    schedule 28.11.2011
comment
событие focusout делает это за меня, в сочетании с blur, чтобы быть абсолютно уверенным :) - person Flo; 07.07.2016

arrow_upward
1
arrow_downward

Также, если ваши элементы, загруженные с помощью ajax, используют $(document).on(event,selector,function) , потому что стандарт, например. $(селектор).click(функция() ... не будет работать

person Andzej Maciusovic    schedule 09.05.2014

arrow_upward
0
arrow_downward

Вам нужно использовать .delegate(), если вы используете jQuery ‹ 1.7.

И .on(), если вы используете версию 1.7 или выше.

Не используйте .live(), так как это намного медленнее.

person PeeHaa    schedule 28.11.2011