内联Javascript可以工作，但不适用于外部

Question

I have this short Javascript code that I want to put in a external file. 我有这个简短的Javascript代码，我想放在外部文件中。 The reason being is because there will be many .htm pages that would use it. 原因是因为会有很多.htm页面会使用它。 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. 当我将脚本放在.htm文件中时，它可以完美地工作。 Another note by the way, I'm loading the .htm file in a Div , could that cause problems? 顺便说一下，我在一个Div加载.htm文件，这会导致问题吗？ Edit: The file is loaded through the .load() jQuery function. 编辑：文件通过.load() jQuery函数加载。

I have also tried putting the script inline in my index.html but it fails to work there too. 我也尝试将脚本内联到我的index.html但它也无法在那里工作。

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. 更新：我已经测试了我的其他.js代码以及与.htm文件无关的代码。 The code that is specific to the elements inside the .htm is the only one that doesn't work. 特定于.htm内部元素的代码是唯一不起作用的代码。

Answer 1

OK, 3 files : 好的，3个文件：

main.html main.html中
loremIpsum2.html loremIpsum2.html
myScroll.js myScroll.js

1). 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 在main.html中我调用jQuery和myScroll.js 外部文件我还有一个空的包装器div （ <div id="loader"></div> ），其中我使用jQuery .load .load()将loremIpsum2.html的内容放入其中

<!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). 2）。 In loremIpsum2.html , I have just a bunch of paragraphs but at the end I have my button : 在loremIpsum2.html中 ，我只有一堆段落，但最后我有我的按钮：

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

3). 3）。 In myScroll.js i Have the function for my scrolling button : 在myScroll.js中我有滚动按钮的功能：

$(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. 由于我加载其中按钮是通过文件.load()我使用的.on()在其委托的形式。

See DEMO and feel free to explore the source code. 请参阅DEMO并随意浏览源代码。

NOTE : .on() requires jQuery v1.7+ 注意： .on()需要jQuery .on() +

Answer 2

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 eg 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. 只需从外部脚本文件名中删除任何空格/特殊字符，例如，不要将其命名为“admin-script.js”，将其命名为“adminscript.js”，不要使用连字符等特殊字符，然后使用新名称引用脚本这就是它，它对我有用。

内联Javascript可以工作，但不适用于外部

问题描述

2 个解决方案

解决方案1
3 已采纳 2013-03-26 00:42:38

解决方案2
1 2017-03-07 14:14:02

内联Javascript可以工作，但不适用于外部

问题描述

2 个解决方案

解决方案1 3 已采纳 2013-03-26 00:42:38

解决方案2 1 2017-03-07 14:14:02

解决方案1
3 已采纳 2013-03-26 00:42:38

解决方案2
1 2017-03-07 14:14:02