Using Jquery to set up an event listener on a child div that changes the CSS property of its parent div

Question

Using Jquery to set up an event listener on a child div that changes the CSS property of its parent div

I am currently working on a product customization form where the radio buttons are hidden using opacity:0.

My goal is to have the border of the image turn black when an option is selected as a visual feedback for the user. I've implemented an event listener on the radio button so that when it's focused, it changes the parent div's CSS properties to provide feedback to the user.

While this setup works perfectly in Chrome and on jsfiddle, it doesn't seem to work on mobile or Safari browsers.

What could be causing this issue and what could be a suitable workaround?

You can view the code on jsfiddle here: https://jsfiddle.net/gLwjhqtd/

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

Thank you!

jquery css forms radio-button onfocus

Answer 1

Answer №1

Avoid using blur or focus as they may not work correctly on mobile devices. Instead, you can use the following code snippet:

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

})

Answer 2

Avoid using blur or focus as they may not work correctly on mobile devices. Instead, you can use the following code snippet:

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

})

Using Jquery to set up an event listener on a child div that changes the CSS property of its parent div

Answer №1

Similar questions

The overflow of Highcharts tooltips is set to be hidden

Display a loading progress bar with jQuery AJAX as your single page website content loads

The presence of the `class` attribute on the `td` element

What is the best way to align an image with the position of a div?

Is there a way to input the Sno data into the database in ascending order?

Compass - substitute a single value for an alternate attribute

What is the best way to add a background to certain elements?

Retrieve childNodes of the Select All input using jQuery from the container node with the class name "container"

Retrieve the input value from a Bootstrap Form Input

"Experience a unique website layout with varying designs on desktop and mobile devices while using the React technology to enable desktop

Implementing Ajax validation in Wordpress

Issue with Fullcalendar's events.php causing JSON object retrieval failure

Extract the ID data from the template model form and utilize Django's AJAX to showcase the corresponding information fetched from the database

Enhancing the Appearance of MUI Date Calendar

What are the steps to make a dropdown menu using only HTML and CSS?

Pure CSS tab system that prevents label propagation using anchors

What is causing the Jquery repeater to not trigger .keyup and .change events on items beyond the second one?

Tips for changing the attribute value in jQuery using the .attr() method instead of just

Creating two interactive animations utilizing a combination of CSS and Javascript, triggered by the click event on

Resolving a CSS Layout Dilemma: How to Overlay Sidebar on Wrappers