JQuery - прослушиватель событий на дочернем div для изменения свойства css родительского div

Question

Я создаю форму настройки продукта, а переключатели скрыты с непрозрачностью: 0.

Я хочу, чтобы граница изображения стала черной, как обратная связь с пользователем о том, что этот параметр выбран. Я добавил прослушиватель событий к переключателю, чтобы в фокусе он менял свойства css родительского div как обратную связь с пользователем. Он отлично работает в chrome и jsfiddle, но не в браузере мобильных или сафари.

Почему это происходит и каково обходное решение.

Вот jsfiddle https://jsfiddle.net/gLwjhqtd/

$('.radioButtons') 
    .focus(function() { 
     $(this).parent().css('border','2px solid black'); 
    }) 
    .blur(function() { 
     $(this).parent().css('border','none'); 
    }) 

Спасибо!

Answer 1

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

$('.radioButtons').change(function(event){ 
    $('.radioButtons').parent().css('border','0'); 
    if($(event.target).is(':checked')) 
    { 
    $(event.target).parent().css('border','2px solid black'); 
    } 

})