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

Question

Совершенно в тупик здесь. Пробовать что-то довольно легко, но это не работает:

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

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

Answer 1

Вам необходимо использовать делегированный обработчик, поскольку у входа нет класса 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.

Answer 2

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

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

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

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

Answer 3

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

$("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");
});

Answer 4

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

Answer 5

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

И .on(), если вы находитесь на 1,7 или выше.

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