Why won't the jQuery function trigger when I click, but only responds when I move the cursor?

Question

Why won't the jQuery function trigger when I click, but only responds when I move the cursor?

I am currently working on a website that includes a basic CSS style switcher. The function responsible for handling the theme button clicks is shown below:

<script>
    $(function() {
    $(".light").click(function(){
        $("link").attr("href", "css/lightHome.css");
        $(".light").attr("disabled", "disabled");
        $(".dark").removeAttr("disabled", "disabled")

    })
    $(".dark").click(function(){
        $("link").attr("href", "css/home.css");
        $(".dark").attr("disabled", "disabled");
        $(".light").removeAttr("disabled", "disabled")
    })
});
</script>

Although the functionality is exactly as I intended, I'm facing an issue where clicking the button doesn't immediately trigger the switch. However, when I move the cursor after clicking, the switch occurs. As my understanding of jQuery is limited, I suspect it may be due to a lack of comprehension regarding DOM processes. Could this be related to missing an "on ready" event?

I have tested by clicking and waiting for several minutes, but the switch only happens after moving the cursor.

The website can be accessed here:

javascript jquery html css function

Answer 1

Answer №1

Instead of completely changing the CSS file, a more efficient option could be to consolidate your styles into a single CSS file and then prefix all selectors with either .theme.dark or .theme.light;

This method can easily be implemented using LESS or SASS for nesting (if you're not already using them, it's definitely worth considering. Writing CSS without a preprocessor seems unimaginable to me now), although it may be more challenging in traditional CSS.

CSS:

.theme.dark <rest of selectors> {
    //CSS
}

.theme.light <rest of selectors> {
    //CSS
}

HTML:

<body class="theme">

Then, on button clicks, the corresponding code would be:

$('body').addClass('dark')
$('body').removeClass('light')

and

$('body').addClass('light')
$('body').removeClass('dark')

Answer 2

Instead of completely changing the CSS file, a more efficient option could be to consolidate your styles into a single CSS file and then prefix all selectors with either .theme.dark or .theme.light;

This method can easily be implemented using LESS or SASS for nesting (if you're not already using them, it's definitely worth considering. Writing CSS without a preprocessor seems unimaginable to me now), although it may be more challenging in traditional CSS.

CSS:

.theme.dark <rest of selectors> {
    //CSS
}

.theme.light <rest of selectors> {
    //CSS
}

HTML:

<body class="theme">

Then, on button clicks, the corresponding code would be:

$('body').addClass('dark')
$('body').removeClass('light')

and

$('body').addClass('light')
$('body').removeClass('dark')

Answer 3

Answer №2

Give this code snippet a try:

function switchStyleSheet(file, index) {
    var currentStyleSheet = document.getElementsByTagName("link").item(index);
    var newStyleSheet = document.createElement("link");
    newStyleSheet.setAttribute("rel", "stylesheet");
    newStyleSheet.setAttribute("type", "text/css");
    newStyleSheet.setAttribute("href", file);

    document.getElementsByTagName("head").item(0).replaceChild(newStyleSheet, currentStyleSheet);
}

$(".dark-mode-button").on("click", function() {
    switchStyleSheet("css/lightTheme.css");
    $(".dark-mode-button").attr("disabled", "disabled");
    $(".light-mode-button").removeAttr("disabled");
});

$(".light-mode-button").on("click", function() {
    switchStyleSheet("css/darkTheme.css");
    $(".light-mode-button").attr("disabled","disabled");
    $(".dark-mode-button").removeAttr("disabled");
});

Answer 4

Give this code snippet a try:

function switchStyleSheet(file, index) {
    var currentStyleSheet = document.getElementsByTagName("link").item(index);
    var newStyleSheet = document.createElement("link");
    newStyleSheet.setAttribute("rel", "stylesheet");
    newStyleSheet.setAttribute("type", "text/css");
    newStyleSheet.setAttribute("href", file);

    document.getElementsByTagName("head").item(0).replaceChild(newStyleSheet, currentStyleSheet);
}

$(".dark-mode-button").on("click", function() {
    switchStyleSheet("css/lightTheme.css");
    $(".dark-mode-button").attr("disabled", "disabled");
    $(".light-mode-button").removeAttr("disabled");
});

$(".light-mode-button").on("click", function() {
    switchStyleSheet("css/darkTheme.css");
    $(".light-mode-button").attr("disabled","disabled");
    $(".dark-mode-button").removeAttr("disabled");
});

Answer 5

Answer №3

Instead of relying on JavaScript, consider using the "checkbox trick". By setting the checkbox handler to display none and styling it accordingly, you can achieve the desired effect without any bugs - as long as you do it correctly!

If you're interested in learning more about this technique, check out the DevTips channel on YouTube.

https://www.youtube.com/user/DevTipsForDesigners

You'll find a tutorial on how to implement this trick on his channel!

Answer 6

Instead of relying on JavaScript, consider using the "checkbox trick". By setting the checkbox handler to display none and styling it accordingly, you can achieve the desired effect without any bugs - as long as you do it correctly!

If you're interested in learning more about this technique, check out the DevTips channel on YouTube.

https://www.youtube.com/user/DevTipsForDesigners

You'll find a tutorial on how to implement this trick on his channel!

Why won't the jQuery function trigger when I click, but only responds when I move the cursor?

Answer №1

Answer №2

Answer №3

Similar questions

Tips for incorporating a local image using file:// in JavaFX WebKit

Angular 2's solution for a persistent footer at the bottom of the page

In the iOS app when the Ionic HTML5 select keypad is opened, a bug causes the view to scroll upwards and create empty space after tapping the tab

Having trouble fetching JSONP data with $.getJSON

Can someone please explain the distinction between $http.get() and axios.get() when used in vue.js?

Constructing an Http Post URL with form parameters using the Axios HTTP client

Exploring the latest features in Bootstrap 4 Alpha and enhancing your

Module-alias cannot be resolved by esm

How to extract parameters from an http get request in Node.js

Click on a link to open it in the current tab with customized headers

Styling the tab view in PrimeFaces

How to style FullCalendar to apply background-color for the entire day, not just the event using the 'addEventSource' method

Starting jQuery on embedded websites

Is there a way for me to send a form containing pre-existing data from a different page?

Achieving the desired display position in CSS3 with bootstrap: Steps to follow

Transferring PHP array data to JavaScript using JSON

I am unfamiliar with this scenario but I can utilize Axios, async/await, and TypeScript to navigate it

Setting up a recurring task with a while loop in a cron job

Tips for setting height within a flexbox layout?

Implementing a clickable search icon within a form input field using CSS: a guide