Стоит задача стилизовать формы. Есть формы с параметрами type="number", у которых нужно стилизовать стрелки при этом чтоб они работали. Со стилизацией все окей, а вот сами стрелки не работаю. Если делать вне контакт форм7, то все работает.
Делаю в форме и вне ее вот так, лишь в формах по другом код пишу:
<div class="counter">
<button type="button" class="but counterBut dec">-</button>
<input type="text" class="field fieldCount" value="1" data-min="1" data-max="20">
<button type="button" class="but counterBut inc">+</button>
</div>
и подключаю JS
function catalogItemCounter(field){
var fieldCount = function(el) {
var
// Мин. значение
min = el.data('min') || false,
// Макс. значение
max = el.data('max') || false,
// Кнопка уменьшения кол-ва
dec = el.prev('.dec'),
// Кнопка увеличения кол-ва
inc = el.next('.inc');
function init(el) {
if(!el.attr('disabled')){
dec.on('click', decrement);
inc.on('click', increment);
}
// Уменьшим значение
function decrement() {
var value = parseInt(el[0].value);
value--;
if(!min || value >= min) {
el[0].value = value;
}
};
// Увеличим значение
function increment() {
var value = parseInt(el[0].value);
value++;
if(!max || value <= max) {
el[0].value = value++;
}
};
}
el.each(function() {
init($(this));
});
};
$(field).each(function(){
fieldCount($(this));
});
}
catalogItemCounter('.fieldCount');
То есть, повторяю то что выше срабаывает вне форм, внутри же уже формы не видят JS ( Не знаю как еще сказать ).
В чем может быть причина? Может есть другие варианты?
КОД JS не мой