Есть будущий интернет магазин. По макету в блоках товаров есть 2 вида отображения количества товаров: span и input.
Логика поведения: изначально отображается только спан. При клике на него он сменяется на инпут и ему передается фокус (появляется возможность изменить количество единиц товара.) После потери фокуса прячем инпут и и показываем спан, передавая в него число которое ввели в инпуте.
Изначально реализация была проще. Банальными селекторами input.amount и span.amount. В Chrome все отлично работало. Но госпожа FireFox доставила кучу проблем.
$("span.amount").click(function() {
$(this).addClass('hidden');
$(this).siblings("input.amount").removeClass('hidden').focus();
});
$("input.amount").focusout(function() {
$(this).addClass('hidden');
$(this).siblings("span.amount").removeClass('hidden').html($(this).val() + ' шт.');
});
Путем долгого дебаггинга было выяснено, что в FF данный скрипт не работает (вернее он работает но очень быстро, моментально вызывается ф-я потери фокуса), потому что у ф-ии focusout() был слишком общий селектор $("input.amount") (как я понял логику, на странице таких элементов много, и из них всего лишь один имеет фокус). Было принято решение "цепляться" только за конкретный инпут а не за все сразу.
var inputCurrent = '';
$('input.amount').hide();// при загрузке прячем все инпуты
$('span.amount').click(function() { // клик по спану
var inputCurrent = $(this).siblings('input.amount'); // передаем в переменную текущий инпут
$(this).hide(); // прячем текущий спан
inputCurrent.show().focus(); // показываем текущий инпут и передаем ему фокус
});
inputCurrent.focusout(function() { // при потере инпутом фокуса:
$(this).hide(); // прячем этот инпут
$(this).siblings('span.amount').show().html($(this).val() + ' шт.'); // показываем текущий спан и передаем в него параметры из инпута
});
Это более правильный вариант, но он в текущем виде не работает, т.к. ф-я focusout() исполняется раньше чем определяется переменная inputCurrent. В итоге имеем focusout is not a function.
Подскажите пожалуйста, как запускать функцию focusout() только после того как определится переменная inputCurrent ? Спасибо.
ps. у меня очень мало опыта и знаний в js и jquery поэтому прощу прощения, если данный код написан криво :)
