Adding a callback to a click in jquery

Question

I have a button (say, button A) which forwards its click event onto another button (say, button B.)

$("#buttonA").click(function()
{
  $("buttonB").click();
});

But now I want it to do something else in a callback function after the button B event completes when it's triggered from button A. The problem is, the syntax I would expect to use is identical to binding a click event to button B instead:

$("#buttonA").click(function()
{
  $("#buttonB").click(function()
  {
    alert("I want this to happen only after buttonA is clicked and buttonB's onclick event finishes.")
  });
});

I understand why the above won't work, but what should I be doing here instead?

Note: ButtonB is doing an asynchronous ajax form submission.

Maybe I'm misunderstanding but it seems like what are you wanting to achieve is working in your second bit of code. jsfiddle.net/4xy6n — Aarmora
– Aarmora, Commented Apr 9, 2014 at 14:34
Is buttonB doing something that would take time, like an AJAX request? — j08691
– j08691, Commented Apr 9, 2014 at 14:35
How about calling a javascript function inside button B click event — Terabyte
– Terabyte, Commented Apr 9, 2014 at 14:37

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

when doing this :

$("#buttonA").click(function()
{
  $("#buttonB").click(function()
  {
    alert("I want this to happen only after buttonA is clicked and buttonB's onclick event finishes.")
  });
});

You are binding an event on the #buttonB, which is not what you want. Just insert your code after the .click() and it will execute after the click event is finished :

$("#buttonA").click(function()
{
  $("#buttonB").click();
  alert("I want this to happen only after buttonA is clicked and buttonB's onclick event finishes.");
});

Button b is async

b is async, you shouldn't use anonymous function with .trigger(). here what you could do :

function doSomething(e){
    e = typeof e === "undefined" ? new Event() : e;
    //your code when b is clicked...
    
    //Then ajax
    return $.ajax('www.example.com');
}

$('#buttonB').on('click', doSomething);

$('#buttonA').on('click', function(){
    doSomething().done(function(){
        alert("I want this to happen only after buttonA is clicked and buttonB's onclick event finishes.")
    })
})

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 9, 2014 at 14:34

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

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

3 Comments

j08691 Over a year ago

If buttonB is performing an AJAX request, this wouldn't be sufficient and would fire immediately.

ajrskelton Over a year ago

Hi. Sorry, I should have mentioned, buttonB is doing an ajax submit.

Karl-André Gagnon Over a year ago

@ajrskelton hi, i've updated my answer, give it a try.

Finrod · Accepted Answer · 2014-04-09 14:34:44Z

0

Use the trigger function to trigger a click on button B

$("#buttonA").click(function()
{
  $("#buttonB").click(function()
  {
    alert("I want this to happen only after buttonA is clicked and buttonB's onclick event finishes.")
  });
  $("#buttonB").trigger('click');
});

answered Apr 9, 2014 at 14:34

Finrod

2,5504 gold badges31 silver badges39 bronze badges

Comments

Matt Burland · Accepted Answer · 2014-04-09 15:01:49Z

Your event handlers aren't asynchronous, so you can just put the "callback" right after the trigger for the other event:

$("#buttonA").click(function()
{
  $("#buttonB").click();
  alert("I want this to happen only after buttonA is clicked and buttonB's onclick event finishes.")
});

http://jsfiddle.net/2Rr7V/

Now, if button B is doing something asynchronous itself, such as doing an AJAX call, then I think the best thing to do is to refactor out the asynchronous part into a separate function that can take a callback and call it directly.

IMHO, if you find yourself needing to trigger an event on another control, you are probably doing it wrong and should instead just refactor the bit of code you want into a separate function that can be called without "faking" an event. There are very few cases (but that's not to say there are no cases) where it makes sense to trigger an event.

So something like:

$("#buttonB").click(function() {
    // do any buttonB specific stuff
    DoAsyncThing();
});

$("#buttonA").click(function() {
    // do any pre-async stuff
    DoAsyncThing(function() {
        alert("Async thing is done");
    });
});

function DoAsyncThing(callback) {
    $.ajax(...).done(function() {
        if (callback && typeof callback === "function") {
            callback();
        }
    });
}

Or you even just return the promise from the ajax request so you can attach a done handler to it.

ajrskelton · Accepted Answer · 2014-04-09 15:46:01Z

0

Thank you for the input, everyone

I eventually solved the problem with the following jquery.Callback code, which appears to be working as expected:

function clickB()
{
    $("buttonB").click();
}

function doAlert()
{
    alert("Happens after B!");
}

function doA()
{
var callbacks = $.Callbacks();
    callbacks.add(clickB);
    callbacks.add(doAlert);
    callbacks.fire();
}

$("buttonA").click(function()
{
    doA();
});

answered Apr 9, 2014 at 15:46

ajrskelton

3403 silver badges10 bronze badges

Collectives™ on Stack Overflow

Adding a callback to a click in jquery

4 Answers 4

Button b is async

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Button b is async

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related