4

Correct me if I am wrong, but seems to me jQuery event handling is completely separate from the javascript event handling. I know that the order of executing jQuery and javascript event handlers themselves is undefined, but can the assumption be made that all javascript handlers will execute before jQuery ones?

In the example given in an answer to this question that seems to be the case.

Also, is there any preference on executing inline javascript event handlers in respect to bound ones?

For clarification, I am asking all of this because I encountered a problem where I have an inline event handler on onClick event of an <a> element that calls the submit() method of an enclosing form. Just before submitting the form, I want to dynamically add some hidden inputs to the form. Right 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 some clarification on this.

Improve this question
1
  • " I know that the order of executing jQuery and javascript event handlers themselves is undefined" - No, all event handlers bound with jQuery will be executed in the order they are bound (when bound to a particular element - with delegated handlers you have to allow for bubbling) because jQuery manages this for you. But jQuery is still JavaScript, it still uses addEventListener() (when the browser has it), so the order of non-jQuery versus jQuery handlers will be undefined. Commented Jun 18, 2013 at 12:39

3 Answers 3

Reset to default
4

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">
<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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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.
1

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.

Improve this answer

Comments

0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.