How to decide execution sequence for Javascript and Jquery function

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.

mekwall · Accepted Answer · 2011-06-07 22:22:18Z

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.

edited Jun 7, 2011 at 22:22

answered Jun 7, 2011 at 7:05

mekwall

29.1k6 gold badges78 silver badges77 bronze badges

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

9 Comments

Ajinkya Over a year ago

@Marcus: The problem is that I am writing a generic script which should run everywhere and I shouldn't (can't) change the original code. is there any other alternative ?

mekwall Over a year ago

@Ajinkya, sadly no. The code in the onclick-attribute will be bound to the event as soon as the DOM element have been created and will thus be the first to be executed. However, you can manipulate the code client side and remove the attribute with .removeAttr("onclick").

Domenic Over a year ago

@Marcus Ekwall, I think .onclick = null will also work? (Not sure though!)

mekwall Over a year ago

@Domenic, that works just great as well as seen in this test case

mekwall Over a year ago

Updated my answer so it actually answers your question ;)

|

Dheeraj Kumar · Accepted Answer · 2011-06-07 07:05:35Z

$(".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.

Maarten Kieft · Accepted Answer · 2011-06-07 07:19:57Z

1

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);

edited Jun 7, 2011 at 7:19

answered Jun 7, 2011 at 7:14

Maarten Kieft

7,1853 gold badges31 silver badges37 bronze badges

Comments

mightyplow · Accepted Answer · 2011-06-07 07:04:34Z

0

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

answered Jun 7, 2011 at 7:04

mightyplow

5192 gold badges6 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to decide execution sequence for Javascript and Jquery function

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related