Ошибка в обработке нажатия на <select>

185
29 ноября 2018, 18:10

На сайте есть выбор размера товара, реализованный через <select>

<div class="item_sizes" >
    <label>Размер:
        <select name="sizes" id="sizes" class="item_sizes">
            <option value="">-- выбрать --</option>
            <option value="50 (L, 4)">50 (L, 4)</option>
            <option value="52 (XL, 5)">52 (XL, 5)</option>
        </select>
    </label>
</div>

За обработку нажатия и передачу выбранного размера отвечает Javascript функция

$('.item_sizes').click(function(){
    var v=$(this).val();
    if(v){
        $(this)
            .parent()
            .parent()
            .parent()
            .find('.button.cart')
            .attr('size',v);
    }
});

Выбор размера состоит минимум из двух кликов: 1 клик на item_sizes для раскрытия списка размеров. 2 клик на нужный размер (например 52 (XL, 5) )

Если мы используем браузер на Windows (например Chrome), то функция работает и размер передается. Если мы используем Android, Mac или IPhone, то сразу размер не передастся, а передастся только после повторного нажатия на item_sizes (можно нажать как на выпадающий список , так ни на слово Размеры:) Тогда функция срабатывает заново и размер передается.

Как переписать функцию, что бы при использовании любой системы выбранный размер сразу передавался без дополнительных кликов?

Answer 1

Возможно, причина такого поведения кроется в отличающейся реализации выпадающих списков на мобильных платформах. Так клик по списку не является кликом по родительскому элементу, потому что список появляется отдельным элементом (по крайней мере на андроид так), поэтому лучше использовать, как Вам уже посоветовали, событие change 

$('#sizes').change(function(){
    var v=$(this).val();
    if(v){/*...*/}
});
READ ALSO
Как проверить что все страницы сайта помещаются в экран?
HTML

Как проверить что все страницы сайта помещаются в экран?

Есть список URL, нужно убедиться что на всех разрешениях экрана на этих страницах не появляется горизонтальный скроллКаждая страница имеет...

 168
Покраска прогресс-бара
HTML

Покраска прогресс-бара

По макету прогресс-бары должны выглядеть так:

 177
Как получить параметры request&#39;a при enctype=&ldquo;multipart/form-data&rdquo; в сервлете Java?
HTML

Как получить параметры request'a при enctype=“multipart/form-data” в сервлете Java?

Есть POST запросДля наглядности, если бы это был GET запрос, то URL выглядел бы так:

 191
Как сделать в span маску?
jQuery

Как сделать в span маску?

У меня есть некоторый span(вот ниже), я его заполняю через jquery, можно ли определять вид его по маске, типо если маска xxx-xxx, то текст будет:156-512?

 163