Question

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.

Answer 1

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.