Wait for click event to complete in Javascript

Question

I have onClick event in my image which causes new tabs to be added to jQuery tabs. The event next to it will add content to this new tab.

$('#Image').click();
$('#controladdedbyclickabove').append( message);

The problem I am seeing is that the click event will not wait for the actions to complete it will continue to next statement. Due to this I cannot see the content being added to the new control that the click would have generated. How do I make the click event to wait for actions to complete before it moves to next statement?

T have to depend on triggering the click because the onClick action on #image has all parameters which I can extract as a string, but I'm not sure how to execute it.

When onClick event happens, this method is called:

function addTab(title, uri, userid) {
    var newTab = $("#tabs").tabs("add", uri, title);
}

Answer 1

you can use callback function:

 if($('#Image')) {
  $('#Image').click(function() {
        $('#controladdedbyclickabove').append( message);
  });
}else {
  console.log('image object not there');
}

Answer 2

You can't wait for the event to be handled, because it won't be handled until you exit your function and return control to the browser.

To run the code after the event has been handled, you need to start it after you have exited the function:

$('#Image').click();
window.setTimeout(function(){
  $('#controladdedbyclickabove').append( message);
}, 0);