JQuery wrong script order?

Question

I have this jquery script, and it does not work in head tag.

<script type="text/javascript">
    $(window).load(function() {
        $( "#target" ).submit(function( event ) {
            alert( "Handler for .submit() called." );
            event.preventDefault();
        });
}
</script>

But if I put the code below the form it usually works.

I want to put it in a .js file. But does not work in the head tag, only if I include after the form.

It is possible to make this code work in head tag?

First of all, your script requires jQuery libraries, which in html must be included before your scipt, secondary I prefer to work with $(document).ready(function(){ /* code */ }); instead of $(window).load(); — Epsil0neR
– Epsil0neR, Commented Oct 13, 2013 at 22:44
$(window).load(function() {} will not run only when rendering the whole page? — DjowYeap
– DjowYeap, Commented Oct 13, 2013 at 22:52

francisco.preller · Accepted Answer · 2013-10-13 22:44:33Z

2

You should initialize jQuery like this instead:

$(document).ready(function() {
    $( "#target" ).submit(function( event ) {
        alert( "Handler for .submit() called." );
        event.preventDefault();
    });
});

answered Oct 13, 2013 at 22:44

francisco.preller

6,6494 gold badges30 silver badges39 bronze badges

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

2 Comments

francisco.preller Over a year ago

Could you please provide a fiddle for troubleshooting?

francisco.preller Over a year ago

Glad your sorted it out :)

Mario Corchero · Accepted Answer · 2013-10-14 12:56:20Z

2

Probably the form is not rendered before .load event is fired.

Check what window is, but you might want to write:

<script type="text/javascript">
    $(document).ready(function() {
        $( "#target" ).submit(function( event ) {
            alert( "Handler for .submit() called." );
            event.preventDefault();
        });
     });
</script>

Check this link

If you don't use the .ready approach, it is going to execute the code, search for #target and find nothing, because the render has not passed the object that you are targeting so it is not able to find it

edited Oct 14, 2013 at 12:56

answered Oct 13, 2013 at 22:44

Mario Corchero

5,6256 gold badges40 silver badges62 bronze badges

1 Comment

DjowYeap Over a year ago

My mistake was to close the function, missed a });. And I was trying to solve for hours. --'

Dan · Accepted Answer · 2013-10-13 22:54:39Z

0

Try this?

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {            
    $(document).on("submit", "#target", function(event) {
        alert("Handler for .submit() called.");
        event.preventDefault();
    });
});
</script>

answered Oct 13, 2013 at 22:54

Dan

12.2k14 gold badges56 silver badges118 bronze badges

Collectives™ on Stack Overflow

JQuery wrong script order?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related