Как заставить работать css()?

[IvanRu08]

Всем привет. Пытаюсь изменить св-во элемента через jQuery, вот код скрипта:

jQuery(document).ready(function() {	//Показываем иконку поиска при нажатии	$('.searchfield').click(function() {		$('.search-bg').css('background-position', '-25px 0px')	});	$('body').click(function() {		$('.search-bg').css('background-position', '0px 0px')	});}); 

Нужно чтобы при нажатии на само поле иконка смещалась, а при нажатии на другое место возвращалась на место. Если убрать обработчик клика с body, то все работает.

Вот свойства .search-bg

.search-bg{    position: absolute;    top: 13px;    right: 12px;    width: 25px;    height: 25px;    background: url(images/search-icon.png) no-repeat;} 

Edited August 22, 2015 by IvanRu08

[Sensei]

$('body').on('click', function(e) {       if (!$(e.target).closest('.searchfield').length) {        $('.search-bg').css('background-position', '0px 0px');    }    });

А вообще, можно было и без js обойтись

.search-input:focus + .search-bg {    background-position: 0 0;}

[IvanRu08]

$('body').on('click', function(e) {       if (!$(e.target).closest('.searchfield').length) {        $('.search-bg').css('background-position', '0px 0px');    }    });

А вообще, можно было и без js обойтись

.search-input:focus + .search-bg {    background-position: 0 0;}

Спасибо, все заработало. Там, у меня еще дальше анимация будет да к тому же jQuery используется не только для этого. Можете кратко объяснить, почему мой код не работал? Логично же вроде все

Edited August 22, 2015 by IvanRu08

[amelice]

Можете кратко объяснить, почему мой код не работал?

Твой код работает. Нужно просто добавить одну строчку в первый обработчик. 

e.stopPropagation();

У тебя одно событие перекрывается другим. Это так работает событийная модель. Можно почитать вот тут. https://learn.javascript.ru/events-and-interfaces

Edited August 22, 2015 by amelice