jquery callback on click to perform another click

Question

I have a series of clicks:

    console.log('1')
    $('.tool-projects').click()
    console.log('2')
    $('#drawer-projects > ul > li > div > div.tool > div.jellybean-container.jelly-beans > span > input.typeahead.tt-input').click(function() {
    console.log('3')
    var project = 'attribution'
    $('.suggestion-value:contains('+project+')').click()
    console.log('4')
    $('.btn-primary')[0].click();

and I want for the page to wait for one click to finish before moving on to the second. I tried this to no avail.

            $('.tool-projects').click(function() {
                console.log('2')
                $('#drawer-projects > ul > li > div > div.tool > div.jellybean-container.jelly-beans > span > input.typeahead.tt-input').click(function() {
                    console.log('3')
                    var project = 'attribution'
                    $('.suggestion-value:contains('+project+')').click(function() {
                        console.log('4')
                        $('.btn-primary')[0].click();            
                    });        
                })    
            });

This just prints out 1. I looked at the documentation - https://api.jquery.com/click/

.click( handler )
handler
Type: Function( Event eventObject )
A function to execute each time the event is triggered.

I thought my solution would work, maybe I just misunderstood how to implement it? Is there a way to have a callback on a click?

To explain why I need to do this:

clicking .tools-projects opens a drop down menu until that's clicked, '#drawer-projects' doesn't exist. Once that does exist, I need to click it which opens the .suggestion-value dropdown menu, so I can access the project attribution

Every new click event handler will exist and process **the next click** that happens for the element. If you are creating a click event handler due to a click happening, the second click handler will not immediately execute. It will wait for the next event. — Taplar, Sep 04 '19 at 15:51
However, to avoid an XY Problem, please explain why you need to force asynchronous click logic into a synchronous pattern? — Taplar, Sep 04 '19 at 15:52
It looks like you're confusing event *triggers* with event *handlers* - each click *trigger* `$(..).click()` will complete before the next line of code is executed. If the click handler `$(..).click(function { .. })` has any *asynchronous* code then the click handler will return before that has completed. You need to handle asynchronous calls differently from "waiting for it to complete" (and certainly not by adding new *handlers*). — freedomn-m, Sep 04 '19 at 16:05
As you've not included whether the click handlers make any ajax calls, this can only be a guidance - if they do, have a read of: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — freedomn-m, Sep 04 '19 at 16:05
From your own link: *This method is a shortcut for .on( "click", handler ) in the first two variations, and **.trigger( "click" ) in the third**.* — freedomn-m, Sep 04 '19 at 16:06

jquery callback on click to perform another click

0 Answers0