Inline Javascript works but not when external

Question

I have this short Javascript code that I want to put in a external file. The reason being is because there will be many .htm pages that would use it. So instead of putting it all inline at every single file, I want to put it in an external file.

But the thing is, it doesn't work. The script is basically a "back to top" button. It works flawlessly when I put the script in the .htm file. Another note by the way, I'm loading the .htm file in a Div, could that cause problems? Edit: The file is loaded through the .load() jQuery function.

I have also tried putting the script inline in my index.html but it fails to work there too.

Here is the code:

$('.backtotopwrapper').click(function(){
  $('body,html').animate({scrollTop: "0px"},1500);
});

Update: I have tested my other .js code and the ones that have nothing to do with the .htm file work. The code that is specific to the elements inside the .htm is the only one that doesn't work.

When you put it in an external file is it a .js file that you link to in the HEAD of your document or at the end of your document just before the close body tag? Wherever it comes is your jquery.js file being loaded before it? Also are you executing the js above on document ready? — Billy Moat
– Billy Moat, Commented Mar 25, 2013 at 23:16
I link it at the Head of my document. I forgot to mention that it's loaded on document ready when it is inline... Wait does it mean that I have to put the document ready tag inside the .js file too? — Banzboy
– Banzboy, Commented Mar 25, 2013 at 23:20
Yeah, you should place all jQuery snippets like the one you're using in one external .js file and have them all wrapped inside one instance the document ready code in there too. — Billy Moat
– Billy Moat, Commented Mar 25, 2013 at 23:22
Doh! That was silly of me, but still it doesn't work. I have this sickly feeling it has something do with the DOM. — Banzboy
– Banzboy, Commented Mar 25, 2013 at 23:24
@theshadowmonkey : $('.backtotopwrapper').on('click', function(){}); won't do event delegation. The correct format should be $("body").on('click', '.backtotopwrapper',function(){}); — JFK
– JFK, Commented Mar 25, 2013 at 23:59

JFK · Accepted Answer · 2013-03-26 00:53:07Z

OK, 3 files :

main.html
loremIpsum2.html
myScroll.js

1). In main.html I call jQuery and myScroll.js external files Also I have an empty wrapper div (<div id="loader"></div>) where I put the contents of loremIpsum2.html using jQuery .load() so

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>link to external js file</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="myScroll.js"></script>
  <script>
  /* <![CDATA[ */
   $(document).ready(function() {
     $("#loader").load("loremIpsum2.html");
   }); // ready
  /* ]]> */
  </script>
 </head>
 <body>
  <div id="wrap">
   <div id="loader"></div>
  </div><!--wrap-->
 </body> 
</html>

2). In loremIpsum2.html, I have just a bunch of paragraphs but at the end I have my button :

<a class="backtotopwrapper" href="javascript:;">go to top</a>

3). In myScroll.js i Have the function for my scrolling button :

$(function () {
    $('body').on("click", ".backtotopwrapper", function () {
        $('body,html').animate({
            scrollTop: 0
        }, 1500);
    });
});

Since I am loading the file where the button is via .load(), I am using .on() in its delegated form.

See DEMO and feel free to explore the source code.

NOTE : .on() requires jQuery v1.7+

Gash · Accepted Answer · 2017-03-07 14:14:02Z

1

I had the same problem but didn't perform any solution mentioned here, i actually dicovered what made it work for me when my external scripts werent working but the same code works internally.

Just remove any spaces/special characters from your external script filename e.g instead of calling it "admin-script.js", call it "adminscript.js", without the special characters like the hyphen, then refer to the script with the new name and thats it, it worked for me.

answered Mar 7, 2017 at 14:14

Gash

814 bronze badges

1 Comment

Võ Minh Over a year ago

thanks!. this file name strict took me infinity to find out.

Collectives™ on Stack Overflow

Inline Javascript works but not when external

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related