I am calling two function one Java script and one Jquery function on click of Cancel button.
The java script function get executed before Jquery function and I want the exactly opposite.
Here is my HTML code

<button type="button" class="noWarning" id="cancelButton" 
    onclick="javascript: showMessage('cancelButton', 'Cancelling...'); disableButtons(); submitForm('${cancelDataRequestFormUrl}');">
    Cancel</button>  

The Jquery function

$(".noWarning").click(function() 
    {
        needToConfirm = false;
        alert("NeedToConfirm : " + needToConfirm);
    });  

showMessage('cancelButton', 'Cancelling...'); get executed before $(".noWarning").click(function()) so how can I change the execution order ?
EDIT:
I tried same with another button

<button type="button" class="noWarning" id="saveButton" 
    onclick="javascript: submitDataRequest('saveButton', 'Saving...', 'newDataRequestForm', '${saveDataRequestFormUrl}', '${successSaveDataRequestFormUrl}');">
    Save as Draft</button>    

And its working fine Jquery function is getting called before onClick functions.
Which puts more confusion.

I am calling two function one Java script and one Jquery function on click of Cancel button.
The java script function get executed before Jquery function and I want the exactly opposite.
Here is my HTML code

<button type="button" class="noWarning" id="cancelButton" 
    onclick="javascript: showMessage('cancelButton', 'Cancelling...'); disableButtons(); submitForm('${cancelDataRequestFormUrl}');">
    Cancel</button>  

The Jquery function

$(".noWarning").click(function() 
    {
        needToConfirm = false;
        alert("NeedToConfirm : " + needToConfirm);
    });  

showMessage('cancelButton', 'Cancelling...'); get executed before $(".noWarning").click(function()) so how can I change the execution order ?
EDIT:
I tried same with another button

<button type="button" class="noWarning" id="saveButton" 
    onclick="javascript: submitDataRequest('saveButton', 'Saving...', 'newDataRequestForm', '${saveDataRequestFormUrl}', '${successSaveDataRequestFormUrl}');">
    Save as Draft</button>    

And its working fine Jquery function is getting called before onClick functions.
Which puts more confusion.

• javascript
• jquery
• html
• jquery-selectors
• dom-events

4 Answers 4

In JavaScript, callbacks and event handlers should be executed in the order they were bound, and there is no way to alter that order. The code in the onclick attribute will be bound directly after creation of the element, and will thus be the first to be executed.

The only way to prevent this is to remove the attribute, either in the source or client-side by using jQuery's .removeAttr, as seen in this test case.

You can then bind the callbacks with jQuery in the order you want them to be executed:

$(".noWarning").click(function(){
    needToConfirm = false;
    alert("NeedToConfirm : " + needToConfirm);
});

$("#cancelButton").click(function(){
    showMessage('cancelButton', 'Cancelling...');
    disableButtons();
    submitForm('${cancelDataRequestFormUrl}');
});

Please note that the usage of the onclick attribute is considered a bad practice that belongs back in the 90s and should be avoided. JavaScript should be separated from the HTML and best be put in a separate file if possible.

$(".noWarning").click(function() 
{
    needToConfirm = false;
    alert("NeedToConfirm : " + needToConfirm);
    showMessage('cancelButton', 'Cancelling...'); 
    disableButtons(); 
    submitForm('${cancelDataRequestFormUrl}');
});  

Remember that jQuery is a javascript based library. So you can use JS within jQuery callbacks.

If you want .noWarning to be a separate callback (for binding to several elements) and #cancelButton to have a unique callback, you can do this:

$(".noWarning").click(function() 
{
    needToConfirm = false;
    alert("NeedToConfirm : " + needToConfirm);
}); 

$("#cancelButton").click(function() 
{
    showMessage('cancelButton', 'Cancelling...'); 
    disableButtons(); 
    submitForm('${cancelDataRequestFormUrl}');
}); 

As you can see, the order you define your callbacks matters.

The execution order is determined by the order you bind a function to the on click event. But in order to bind a function to the onclick event of a button, the button must be already defined.

In your example you are defining your button and directly bind the showMessage function to it, by saying onclick=... etc. Problably some more down in your code you bind the second function.

To get more control over it, bind your onclick functions all on the same way, either by defining it in the onclick attribute, or by doing it with javascript later on.

Example

<button id="button1" onclick="function1();function2();">click me</button>

Or by doing it like this

$("#button1").click(function2);  
$("#button1").click(function1);  

why don't you just put the showMessage function into the jQuery-function?