moving inline jquery to .js file

Question

When I move my jQuery code residing inline from the template to an included .js file all explicit functions still work but all jQuery event-handlers stop working, they simply do nothing anymore:

still works:

function doit() {}

does NOT work anymore:

$("#my_id").click(function () {
});

Common mistake is including the JS-file BEFORE you've included the jQuery library. — Sondre
– Sondre, Commented Jan 21, 2011 at 12:03
for completeness: I am using the play-framework, which makes use of groovy-templates. — trajectory
– trajectory, Commented Jan 21, 2011 at 15:06

Sondre · Accepted Answer · 2011-01-21 12:07:28Z

2

Let me add a little to my comment:

This will work because jquery is loaded first, then your js:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myJavascript.js"></script>

This will not work as jQuery is not yet loaded when the custom javascript is read:

<script type="text/javascript" src="myJavascript.js"></script>
<script type="text/javascript" src="jquery.js"></script>

Not sure this is your problem, but it is a common mistake alot of people make so might be the solution. Let me know if it solved your problem or not;)

answered Jan 21, 2011 at 12:07

Sondre

1,89819 silver badges34 bronze badges

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

1 Comment

trajectory Over a year ago

unfortunately this is not the problem. I have a main.html in which I first include jquery.js, after that I include my.js with the extracted jquery-code.

trajectory · Accepted Answer · 2011-01-21 17:27:57Z

2

To answer my own question, I had to include the .js file not in the main-groovy-template but in the template extending the main-template, then it worked.

answered Jan 21, 2011 at 17:27

trajectory

1,4873 gold badges16 silver badges21 bronze badges

1 Comment

Nachokhan Over a year ago

It make sense if your main-template includes jquery.js at the end. Why? Because the HTML code that extends your template may do it also at the end, but its end occurs before that the end of the main template. So "at the end" your JS file is somewhere in the middle of the final HTML and the JQUERY.JS is exactly at the end.

TigerMunky · Accepted Answer · 2011-01-21 12:09:40Z

1

Have you done it within "document.ready"?

e.g.

$(function() { //shorthand for document.ready


  $("#my_id").click(function () {

    //do something

  });


});

answered Jan 21, 2011 at 12:09

TigerMunky

214 bronze badges

Collectives™ on Stack Overflow

moving inline jquery to .js file

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related