Convert JQuery to a click event

Question

Convert JQuery to a click event

I have a code snippet that is currently functioning properly

$(window).load(function(){
$(document).ready(function(){
$("input[name ='_sft_product_cat[]']").parent().next(".children").css("background", "yellow");
})
});

My goal is to convert this into a click event, but I am facing difficulties in making it work. I have attempted the following

$(window).load(function(){
$(document).ready(function(){
$("input[name = '_sft_product_cat[]']").click(function(){
 $(this).parent().next(".children").css("background", "blue");
return false;
});
}

Can anyone spot what I may be doing incorrectly?

Thank you

jquery css

Answer 1

Answer №1

Don't forget to add closing brackets for the document.ready and window.load functions. Using only document.ready is enough, there's no need for both.

$(document).ready(function(){
$("input[name = '_sft_product_cat[]']").click(function(){
 $(this).parent().next(".children").css("background", "blue");
return false;
});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" name="_sft_product_cat[]"/>
</div>
<div class="children">Hello</div>

Answer 2

Don't forget to add closing brackets for the document.ready and window.load functions. Using only document.ready is enough, there's no need for both.

$(document).ready(function(){
$("input[name = '_sft_product_cat[]']").click(function(){
 $(this).parent().next(".children").css("background", "blue");
return false;
});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" name="_sft_product_cat[]"/>
</div>
<div class="children">Hello</div>

Answer 3

Answer №2

It appears that you have overlooked closing brackets in your code. I recommend utilizing an Integrated Development Environment (IDE) such as PhpStorm or WebStorm for your development work. These IDEs are adept at identifying and rectifying such errors.

Answer 4

It appears that you have overlooked closing brackets in your code. I recommend utilizing an Integrated Development Environment (IDE) such as PhpStorm or WebStorm for your development work. These IDEs are adept at identifying and rectifying such errors.

Convert JQuery to a click event

Answer №1

Answer №2

Similar questions

Making an Ajax request using HTTPS in an HTTP environment

Retrieve information from an ajax response in XML format

Determine the character's position in an input field by tracking mouse movements

What is the best method for enclosing all text within an HTML document with a different element?

Ways to extract the maximum value from a dataset formatted in JSON

"Utilizing Bootstrap's hamburger menu for a sleek solution when your menu becomes overcrowded

What is the best way to ensure that a div appears below, rather than alongside, another one

Troubleshooting: The Jquery each loop is malfunctioning

Implement the map function to validate every input and generate a border around inputs that are deemed invalid or empty upon button click

Sort information based on the alphabetical order of words using AngularJS

Guide on how to refresh the background image using the identical URL within a directive

Is it possible to update the content page without having to refresh the master page?

Issue with custom leaflet divIcon not maintaining fixed marker position during zoom levels

Create a CSS menu that remains fixed at the top of the page and highlights the current submenu as

The hamburger menu icon is not visible

Ways to Increase jQuery Element ID

Looking to retrieve a specific data element within Vue.js?

Looking for recommendations on effective jQuery plugins for drag and drop file uploading?

How to customize the hover and active properties of a checked checkbox in Vue 3 using Tailwind CSS and PUG?

Ways to heighten the `RadComboBox` `DropDownHeight` featuring `Templates`