用户单击链接时运行javascript函数

Question

我只希望点击链接时触发此代码

<a href="#" id="open">OPEN</a>

$( window ).resize(function() {
    resetValue();
    sizeScrollbar();
    reflowContent();
});
//init scrollbar size
setTimeout( sizeScrollbar, 10 );//safari wants a timeout

因此，从理论上讲，我想要：

if(open button clicked)
{

  $( window ).resize(function() {
    resetValue();
    sizeScrollbar();
    reflowContent();
  });
  //init scrollbar size
  setTimeout( sizeScrollbar, 10 );//safari wants a timeout
}

我知道如何在jquery中执行此操作，但是此代码在我包含在页脚中的单独的js文件（文件名：scroll.js）中。

我尝试注释掉

$( window ).resize(function() {
   resetValue();
   sizeScrollbar();
   reflowContent();
});
//init scrollbar size
setTimeout( sizeScrollbar, 10 );//safari wants a timeout

然后像这样在我的main.js文件中触发它：

$(".open").click(function() {

    $( window ).resize(function() {
      resetValue();
      sizeScrollbar();
      reflowContent();
    });
    //init scrollbar size
    setTimeout( sizeScrollbar, 10 );//safari wants a timeout

});

但这给了我一个错误：

未捕获的ReferenceError：未定义sizeScrollbar

我认为这是因为当我在main.js文件中调用sizeScrollbar时，我试图在scroll.js文件之外调用它。

Answer 1

问题在于，scroll.js是在闭包（$（function（）{}）;）中声明的。 如果要使在闭包内部声明的所有内容可用，则必须在闭包末尾返回一些内容。 这意味着您可能想要返回一个包含函数的对象：

// scroll.js
var scroll = (function() {

   // code       

   function sizeScrollbar() {};

   // code

   return {
      'sizeScrollbar' : sizeScrollbar
   }

})();

然后在main.js中，您可以这样调用sizeScrollbar：

scroll.sizeScrollbar();