Prevent a click event from triggering on one div when another div is clicked using jQuery

Question

Prevent a click event from triggering on one div when another div is clicked using jQuery

I am in the process of designing a website that includes two clickable divs, "#coloursettings" and "#powersettings". Both of these divs successfully unbind the menu ("#tab a"), but I am struggling to make them deactivate each other upon clicking one, then re-activate when clicked again. I have attempted to enter the corresponding ID into the same method that unbinds/binds the "#tab a", but it does not deactivate the other clickable div. Can anyone provide assistance on how to achieve this functionality?

//Colour Settings Menu//
var clicked1 = true;
$("#coloursettings").click(function() {
    $("#colourselect").toggle();

    $(".content, .tab").toggleClass('blur');

    if (clicked1) {
        $("#tab a").unbind("click", foo);
        clicked1 = false;
    }
    else {
        $("#tab a").click(foo);
        clicked1 = true;
    }       
});

//Power Menu//
var clicked = true;
$("#powersettings").click(function() {
    $("#powermenu").toggle();

    $(".content, .tab").toggleClass('blur');

    if (clicked) {
        $("#tab a").unbind("click", foo);
        clicked = false;
    }
    else {
        $("#tab a").click(foo);
        clicked = true;
    }       
});

Relevant HTML

<div class="icon" id="coloursettings">...</div>
<div class="icon" id="powersettings">...</div>

Visit my JSFiddle here

jquery html css bind unbind

Answer 1

Answer №1

I was uncertain if I fully grasped your requirements, but I made an effort to assist you. Please review the link below to see if it satisfies your needs.

//Customizing Color Settings Menu//
var clicked1 = false;
$("#coloursettings").click(function () {
    if (clicked) {
        return;
    }
    $("#colourselect").toggle();
    $(".content, .tab").toggleClass('blur');
    if (clicked1) {
        //$("#tab a").unbind("click", foo);
        clicked1 = false;
    } else {
        //$("#tab a").click(foo);
        clicked1 = true;
    }
});
//Configuring Power Menu//
var clicked = false;
$("#powersettings").click(function () {
    if (clicked1) {
        return;
    }
    $("#powermenu").toggle();
    $(".content, .tab").toggleClass('blur');
    if (clicked) {
        //$("#tab a").unbind("click", foo);
        clicked = false;
    } else {
        //$("#tab a").click(foo);
        clicked = true;
    }
});
//foo Function
function foo(e) {
    if(clicked || clicked1)
    {
        return;
    }
    hideContentDivs();
    var tmp_div = $(this).parent().index();
    $('.main #content').eq(tmp_div).fadeIn(1000);
}

Check This Out

Answer 2

I was uncertain if I fully grasped your requirements, but I made an effort to assist you. Please review the link below to see if it satisfies your needs.

//Customizing Color Settings Menu//
var clicked1 = false;
$("#coloursettings").click(function () {
    if (clicked) {
        return;
    }
    $("#colourselect").toggle();
    $(".content, .tab").toggleClass('blur');
    if (clicked1) {
        //$("#tab a").unbind("click", foo);
        clicked1 = false;
    } else {
        //$("#tab a").click(foo);
        clicked1 = true;
    }
});
//Configuring Power Menu//
var clicked = false;
$("#powersettings").click(function () {
    if (clicked1) {
        return;
    }
    $("#powermenu").toggle();
    $(".content, .tab").toggleClass('blur');
    if (clicked) {
        //$("#tab a").unbind("click", foo);
        clicked = false;
    } else {
        //$("#tab a").click(foo);
        clicked = true;
    }
});
//foo Function
function foo(e) {
    if(clicked || clicked1)
    {
        return;
    }
    hideContentDivs();
    var tmp_div = $(this).parent().index();
    $('.main #content').eq(tmp_div).fadeIn(1000);
}

Check This Out

Answer 3

Answer №2

Having multiple elements with the same id="tab" is not recommended as $('#tab') will only select one of them. It's better to use classes like $('.tab') or $('.menu .tab') if you don't need ids.

If I've grasped your situation correctly, you want to "disable" a links with custom click handlers. One approach is to add a marker class (e.g., disabled) and then have your handler verify its presence:


var clicked1 = false;
$("#coloursettings").click(function(){
     ...
     clicked1 = !clicked1;
     $('.menu .tab a').toggleClass('disabled', clicked1);
});

// Inside your $('.menu .tab a').click() handler:
$('.menu .tab a').click(function(){
    if ($(this).hasClass('disabled')) {
        return; // Do nothing if disabled
    }

    // Otherwise, proceed with action
});

Answer 4

Having multiple elements with the same id="tab" is not recommended as $('#tab') will only select one of them. It's better to use classes like $('.tab') or $('.menu .tab') if you don't need ids.

If I've grasped your situation correctly, you want to "disable" a links with custom click handlers. One approach is to add a marker class (e.g., disabled) and then have your handler verify its presence:


var clicked1 = false;
$("#coloursettings").click(function(){
     ...
     clicked1 = !clicked1;
     $('.menu .tab a').toggleClass('disabled', clicked1);
});

// Inside your $('.menu .tab a').click() handler:
$('.menu .tab a').click(function(){
    if ($(this).hasClass('disabled')) {
        return; // Do nothing if disabled
    }

    // Otherwise, proceed with action
});

Answer 5

Answer №3

In your markup, you have mentioned the issue of using id's multiple times. Remember, an id should be unique and used only once per page.

To disable a "button" in jquery, follow these steps:

Start by adding this code to the beginning of your $("#coloursettings").click function:

 $("#powersettings").addClass("disabled");

Next, add this code to the beginning of the $("#powersettings").click function:

 if ($(this).hasClass("disabled")) {
    exit;
 }

You can find an example on JSFiddle here: http://jsfiddle.net/6W5Hv/3/

Repeat the same process for the other button as well.

Remember, the golden rule is to use ID's only once per page! ;-)

Answer 6

In your markup, you have mentioned the issue of using id's multiple times. Remember, an id should be unique and used only once per page.

To disable a "button" in jquery, follow these steps:

Start by adding this code to the beginning of your $("#coloursettings").click function:

 $("#powersettings").addClass("disabled");

Next, add this code to the beginning of the $("#powersettings").click function:

 if ($(this).hasClass("disabled")) {
    exit;
 }

You can find an example on JSFiddle here: http://jsfiddle.net/6W5Hv/3/

Repeat the same process for the other button as well.

Remember, the golden rule is to use ID's only once per page! ;-)

Answer 7

Answer №4

Experiment with turning off and on the ability to click within the divs:

Learn how to disable div click events

Answer 8

Experiment with turning off and on the ability to click within the divs:

Learn how to disable div click events

Prevent a click event from triggering on one div when another div is clicked using jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Issue with PageSpeed and Lighthouse showing NOT_HTML error post recent update

The jQuery Ajax function seems to be malfunctioning, while the PHP code is executing smoothly without any

Designing a dynamic button with changing colors using html and css

Search for a DIV element within iMacro on a consistent basis

Efficient Ways to Present and Personalize Indian Date and Time using JavaScript

Storing dropdown values in variables using AJAX and JQuery

My React project is not showing the text in the way that I had envisioned

What steps can be taken to implement jQuery within an Angular 15 npm package?

Restrict the option to select checkboxes

Leading astray — using htmlentities will not function

Is there a way to incorporate text at the end of a row in HTML?

Bootstrap requires Visual Studio Code live-server plugin to function properly

Embedding a PDF file into an HTML form

Multiple file uploads with dynamic image previews and individual names

Sending data from a JSP page to a JavaScript function

Issues with Jquery Ajax implementation causing data not to display in HTML

Implementing CSS styles with jQuery

The POST method is failing to transmit data with the Ajax request

Arrangement of elements on a page

What is the correct method of implementing the "OnChange" event to a WooCommerce select element?