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!

jquerycssformsradio-buttononfocus

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');
  }

})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Simple steps to change JSON Object to JavaScript array

Referring to this question and this other one, I am seeking advice on how to handle a JSON object structure different from the examples provided: This is my JSON Object: var myData = { "04c85ccab52880": { "name": "name1", "firstname": ...

javascriptjqueryarraysjson

The table appears to be fixed in place and will not scroll, even though the data

Previously, my code was functioning perfectly with the mCustomScrollbar I implemented to scroll both vertically and horizontally on my table. However, while revising my jQuery code for organization purposes, I seem to have unknowingly altered something tha ...

javascriptjqueryhtml

Material-UI: Eliminating linkOperator functionality in data-grid

Is there a way to completely eliminate the linkOperator UI from the filter panel? I managed to move pagination to the top of the table using Material-UI, but can I achieve the same for the "Operators" menu programmatically? ".MuiDataGridFilterForm-linkOpe ...

cssreactjsmaterial-ui

Inconsistent expansion panel widths observed in Chrome when using React material-ui

I've encountered an issue in Chrome where the width adjusts to fit its content instead of taking up the full width of the container. However, this problem does not occur on Firefox. https://i.stack.imgur.com/HyWGU.png When I click on the expand icon ...

cssreactjsmaterial-ui

What is the best way to include overflow-hidden in the image displayed by the tailblock component?

I have implemented the following Tailblock component, which is built on tailwind.css. My goal is to achieve a hover effect where the image scales up within its original dimensions. I want the image to zoom in without changing its height and width. I atte ...

htmlcsstailwind-csstailwind-ui

Creating a dynamic visual experience with Angular 2: How to implement multiple font colors

I have a text area which is connected to one string, with the default text color set to white. <textarea style="background-color: black;color:#fff;" [(ngModel)]="outputText"></textarea> The connected string contains multiple variables. retur ...

htmlcssangulartypescript

Limiting the use of CSS selectors to a single class without the need to include the class name multiple

I am trying to find a solution to avoid repeating the same class name multiple times in CSS. For instance, if I have: .class1 div { color: red } .class1 h2 { color: blue } .class1 p { color: yellow } Is there a way to consolidate these three rules under ...

css

The relative positioning is currently being obstructed

Having some trouble using position:relative to shift my logo to the left of my webpage. Oddly, moving it 20px seems to have no effect, but shifting it by 300px downwards causes it to vanish completely. Here's a snippet of my current code: .container ...

cssflexbox

Transmitting a plethora of information using jQuery

Here's the code I currently have for sending data: var test={imagename:"apple.jpg",x:"13",y:"33"}; $.ajax({ type: "POST", url: "some.php", data: test, success: function(response){ console.log(response); } }); ...

phpjavascriptjqueryjson

The HTML dropdown menu becomes crowded with numerous <li menu items, leading to it wrapping

One issue arises when the number of menu items exceeds the capacity to fit on a single line, causing them not to wrap from left to right onto the second line. The desired outcome is for the second line of the menu to start on the left just like the first l ...

htmlcss

Ways to verify if one div in jQuery contains identical text to another div

I need help with a jQuery script to remove duplicate text in div elements Here's the requirement: If div1 contains the text "hi" and div2 also contains "hi", then div2 should be removed Below is my current code snippet: <script src="https:/ ...

javascriptjqueryhtml

The AJAX process is only retrieving information from the last form within the loop on Django platform

I am facing an issue with a for loop that generates multiple forms on my page. I'm trying to use AJAX to submit these forms without refreshing the page, but no matter which form I submit, it only displays the value from the last form. Here is the HTM ...

djangoajaxformsajaxform

What sets apart jquery-1.3.2-vsdoc.js from jquery-1.3.2.min-vsdoc.js?

I'm curious about the distinction between these two files. I understand they are used for intellisense in Visual Studio, but why would there be two versions of it? Is the only dissimilarity between jquery and jquery minified simply the removal of com ...

.netasp.netjquery

The issue with style.background not functioning in Internet Explorer is causing complications

I am currently developing a JavaScript game that involves flipping cards. However, I have encountered an issue with the style.background property. It seems to be functioning correctly in Chrome but not in Internet Explorer. Here is the problematic code sn ...

javascripthtmlcssinternet-explorer

A dynamic AJAX menu showcasing content in a dropdown format, away from the conventional table layout

My dropdown select menu is correctly populating with data, but the output always appears outside of the table. Can anyone spot the issue in my code? Any suggestions or ideas are greatly appreciated! Thanks in advance, select.php <?php $q = $_GET[&apos ...

javascriptphpjqueryajax

The best approach to incorporating interactive animation in next.js

My vision is to develop a character creation application using next js. The app should empower users to customize the character using sliders and gender selection buttons. The ultimate goal is to have a 2D animated version of the character that dynamicall ...

javascriptcssnext.jsfrontendcss-animations

When HTML/JS code is utilized, the submit button or image should function to open the same page as

In addition to the left and right mouse buttons, you also have a middle mouse button. If you click on an image or hyperlink with this middle mouse button while browsing any website, it will open a new window in the background. Now, I want to achieve a sim ...

javascripthtmlformssubmit

Refresh KendoUI Grid data with latest additions

I currently possess: $.post('buying-grid/split/' + config.route.params.id, item).success(function(data){ var ds = new kendo.data.DataSource(); ds.data(data) $('#buyingGrid').data('ke ...

javascriptjquerykendo-uikendo-gridkendo-datasource

What are the steps to successfully submit my form once all the validation requirements have been met?

I successfully completed the validation process, but I am encountering an issue when trying to submit the form. An error message pops up indicating that there is an error related to a specific field (e.g., special characters being used). However, even when ...

javascriptjqueryformsvalidation

Looking to develop a dynamic JSON preview feature using AngularJS

Below is an example of JSON data: data: [{ test: { innertest: "2345", outertest: "abcd" }, trans: { sig: "sou", trip: [{ one: "2" }, { two: "3" }], otherac: "iii" },{ test: { innertest: "uuu", ...

javascriptjqueryangularjsjson