Блог

Я пытаюсь заставить .toggleClass работать с формой, в которой у меня есть несколько текстовых / входных данных, но она работает не так, как мне хотелось бы. Я хочу, чтобы все поля ввода [type =»text»] на странице имели эту функциональность. Некоторые поля являются статическими, а некоторые добавляются с помощью .append и .в реальном времени они работают неправильно. В принципе, я хочу функцию, которая работает для всех полей, статических или динамических.

Код не работает

 $(document).ready(function(e) {
   $(this).live('focusin, blur', function() {
        $(':input[type="text"]').bind('focusin blur', function() {
        $(this).toggleClass('fieldFocus');  
        })
    });
});
  

Работает для статических

 $(':input[type="text"]').bind('focusin blur', function() {
        $(this).toggleClass('fieldFocus');
    });
  

Я уверен, что это основная проблема, но, хоть убейте, я не могу в этом разобраться.

Любая помощь была бы отличной! Спасибо!

Работает!

 $(document).ready(function(e) {
        $(':input[type="text"]').live('focusin blur', function() {
        $(this).toggleClass('fieldFocus');  
        });
    });
});
  

Из live() документов:

строка может содержать несколько типов событий, разделенных пробелами, или пользовательские имена событий

В данный момент вы используете запятую 🙂

( .live('focusin, blur' должно быть .live('focusin blur' )

 $(':input[type="text"]').live('focusin blur', function() {
    $(this).toggleClass('fieldFocus');
});
  

Редактировать:
Просто на заметку — в jQuery 1.7 представлен новый интерфейс для событий, чтобы приведенный выше пример выглядел следующим образом:

 $(document).on('focusin focusout', ':text', function(){
    $(this).toogleClass('fieldFocus');
});
  

Он также использует ярлык, :text как указано scumah, и focusout как указано Брайаном Россом, и из-за того, что он blur не всплывает в IE (jQuery использует focusout , чтобы обойти это).

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

Этот код должен работать, проверьте эту скрипку:http://jsfiddle.net/W83Du

 $(':text').live('focusin blur', function() {
    $(this).toggleClass('fieldFocus');  
});
  

Обычно focusin событие сопряжено с focusout и focus сопряжено с blur . Кроме того, при вызове live разделяйте события, которые вы хотите присоединить, пробелами, а не запятыми, вот так:

 $(this).live('focusin focusout')
  

вместо

 $(this).live('focusin, focusout')