Geek Answers Handbook

Jquery event handlers execution order for javascript event handlers (inline)

Correct me if I'm wrong, but it seems that jQuery event handling is completely separate from javascript event handling. I know that the execution order of jQuery and javascript event handlers themselves is undefined, but is it possible to assume that all javascript handlers will be executed before jQuery?

As an example , given in the answer to this question , which seems to be the case.

Also, is there any preference when executing the built-in javascript event handlers over related ones?

For clarification, I ask about this because I encountered a problem when I have a built-in event handler in the onClick event of the onClick element that calls the submit() method of the closing form. Before submitting the form, I want to dynamically add hidden inputs to the form. Now I am doing this:

  var preSubmit = function preSubmit() { // add inputs } var oldSubmit = form.submit; form.submit = function newSubmit() { preSubmit(); oldSubmit.call(form, arguments); }


But I'm really wondering if there is a more elegant way, and I really need an explanation.

+4
source share
3 answers

I'm not sure about the specifications, but I suppose that the event handlers are just queued in the same order as you define them. Inline handlers are defined directly in the DOM node, so nothing else can go before.

The most elegant way is to write all your JavaScript in an unobtrusive way, i.e. leave it separate from HTML (you seem to mix programming styles). Regardless, you can intercept form onsubmit by adding an onsubmit handler to the form:

 $("form").submit(function(){ // Do stuff return true; });

Update

I did some testing, and it looks like the onsubmit handler attached to the form via jQuery does not start when you call the submit () DOM method somewhere else. Here is a workaround:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"><!-- jQuery(function($){ $("a").each(function(i, a){ a.onclick = function(){ // Remove previous handlers alert("I will no longer submit the form"); $(this).closest("form").submit(); }; }); $("form").submit(function(){ alert("I'll take care myself, thank you"); $("input[name=foo]").val("Another value"); return true; }); }); //--></script> </head> <body> <form action="" method="get"> <input type="text" name="foo" value="Default value"> <a href="javascript:;" onclick="document.forms[0].submit()">Submit form</a> </form> </body> </html>
+4
source

There are two solutions: wrap the form submit function or the onClick link handler. I do not know that jQuery offers the "wrap existing function" API.

As with the order of execution, jQuery is JavaScript, so handlers run when the browser starts. This is not something specific to jQuery, unless the API claims that something runs asynchronously.

+1
source

In addition to the details of your question, you can simply add the onsubmit event, which will be fired before the form is submitted anyway ...

0
source

More articles:


All Articles