1

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

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

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

这是代码：

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

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

4

2 回答 2

3

好的，3个文件：

  • main.html
  • loremIpsum2.html
  • myScroll.js

1）。在main.html我调用 jQuery 和myScroll.js 外部文件我还有一个空的包装器div ( <div id="loader"></div>) 我使用 jQuery放置loremIpsum2.html.load()的内容所以

<!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);
    });
});

由于我正在加载按钮所在的文件 via .load()，因此我正在使用.on()其委托形式。

查看DEMO并随意探索源代码。

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

于 2013-03-26T00:42:38.373 回答
1

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

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

于 2017-03-07T14:14:02.447 回答