How to disable functionality that takes place after a click event using jQuery

Question

I have a button on my page which, when clicked, listens for another button being clicked and then performs an AJAX call. For example:

$( 'button#a' ).click( function() {

    $( 'button#b' ).click( function() {
        // Perform an AJAX call here.
    });

});

Here is a demo of my code so far:

DEMO

I want to disable the ajax call functionality if a third button button#c is clicked at any time during the time that the page is loaded. I'm at a loss at how this can be done. Hoping someone can suggest an approach.

In the demo, click on button a and then button c and then button b. The AJAX call fires. I don't want that because button c was clicked. — henrywright
– henrywright, Commented Nov 19, 2014 at 18:30

Domain · Accepted Answer · 2014-11-19 18:39:03Z

1

Should not code click event inside click, but after modifying in your code.

var third_click= false; 
$(document).ready(function() {
    $( 'button#c' ).click( function() {
        third_click = true;
    })

    $( 'button#a' ).click( function() {

        $( 'button#b' ).click( function() {
            if( !third_click ) {
                // Perform an AJAX call here.
                alert( 'ajax call in progress' );
            } else {
                alert( 'Can\'t call ajax' );
            }
        });

    });
})

here is demo.

answered Nov 19, 2014 at 18:39

Domain

11.8k3 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

henrywright Over a year ago

"Should not code click event inside click" - why is that?

Niffler Over a year ago

@henrywright I think it's just not considered "nice coding"... But if you wanted to avoid that, you could just do more or less the same thing with button#a as it's done with button#c in the code above: jsfiddle.net/Niffler/qeojLmn4/2

dhershman · Accepted Answer · 2014-11-19 18:43:15Z

0

What if you used button a to hide button b until a is clicked and then show button b and so fourth until your results are displayed as you with.

example:

  $('.btnB').hide();

 $('.btnA').on('click', function() {
  $('.btnB').toggle();
});

Unless it needs to all display at one time this method wouldn't be able to work in that type of situation

answered Nov 19, 2014 at 18:43

dhershman

3412 silver badges13 bronze badges

Comments

j08691 · Accepted Answer · 2014-11-19 18:44:38Z

0

You can just remove the click events from #a and b# when clicking on #c with:

$('#c').click(function () {
    $('#a,#b').off('click')
})

jsFiddle example

answered Nov 19, 2014 at 18:44

j08691

209k33 gold badges269 silver badges281 bronze badges

Collectives™ on Stack Overflow

How to disable functionality that takes place after a click event using jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related