ansaurus

Question

Order of execution of jquery event handlers in respect to (inline) javascript event handlers

Answer 1

A:

Asides from the detail of your question, you could just add an onsubmit event, which will be called before the form submits anyway...

Sohnee 2010-08-11 07:50:05

Answer 2

+1 A:

There are two solutions: Wrap the submit function of the form or the onClick handler of the link. I'm not aware that jQuery offers a "wrap existing function" API.

As for the run order, jQuery is JavaScript, so the handlers run when the browser runs them. That's not something specific to jQuery, except when the API states that something is run asynchronously.

Aaron Digulla 2010-08-11 07:51:36

Answer 3

+2 A:

I'm not sure about the specs but I presume that event handlers are just queued in the same order as you define them. Inline handlers are defined right in the DOM node so nothing else can go earlier.

The most elegant way is to write all your JavaScript in an unobtrusive way, i.e., keep it separated from HTML (you appear to be mixing programming styles). Whatever, you can intercept form submission by attaching an onsubmit handler to the form:

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

Update

I've done some testing and it appears that an onsubmit handler attached to a form via jQuery does not get triggered when you call the DOM's submit() method somewhere else. Here's a workaround:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<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"&gt;&lt;/script&gt;
<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>

Álvaro G. Vicario 2010-08-11 07:58:13

If it were up to me I would definitely write it all in a separate file. Unfortunately I work with dynamically generated pages that already contain event handling, and removing it out now is just asking for problems. I already tried intercepting submission with `onSubmit()` but it never gets called if submitting form with `submit()`, just when pushing the submit button. Thanks for the answer though.

alh84001 2010-08-11 08:21:03

I think I get your point now. See my update.

Álvaro G. Vicario 2010-08-11 09:18:47

ansaurus

tags:

views:

answers:

Order of execution of jquery event handlers in respect to (inline) javascript event handlers

Update

related questions