Question

我有这个简短的Javascript代码，我想放在外部文件中。原因是因为会有很多.htm页面会使用它。因此，我不想将它全部内联到每个文件中，而是将其放在外部文件中。

但问题是，它不起作用。该脚本基本上是一个“返回顶部”按钮。当我将脚本放在.htm文件中时，它可以完美地工作。顺便提一下，我正在.htm加载Div文件，这会导致问题吗？编辑：文件通过.load() jQuery函数加载。

我也尝试将脚本内联到我的index.html中，但它也无法在那里工作。

以下是代码：

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

更新：我已经测试了我的其他.js代码以及与.htm文件无关的代码。特定于.htm内部元素的代码是唯一不起作用的代码。

Answer 1

好的，3个文件：

main.html中
loremIpsum2.html
myScroll.js

1）。在 main.html 中，我调用了jQuery和 myScroll.js 外部文件我还有一个空的包装器 div （<div id="loader"></div>），我使用jQuery .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）。在 loremIpsum2.html 中，我只有一些段落，但最后我有我的按钮：

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

3）。在 myScroll.js 中我有滚动按钮的功能：

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

由于我正在通过.load()加载按钮所在的文件，因此我在其委派的表单中使用了.on()。

请参阅 DEMO ，随时浏览源代码。

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

Answer 2

我遇到了同样的问题，但是没有执行这里提到的任何解决方案，我实际上发现了当我的外部脚本无法运行但同样的代码在内部运行时，它对我有用的原因。

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

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

2 个答案: