如何从 HREF 调用 $(window).load 中定义的 JQuery 函数

Question

我喜欢将所有 JQuery 函数和事件接收器的范围限制为 $(window).load，如下所示：

$(window).load(function ()
{
   function Foo(id)
   {
      alert(String.format("Do Foo for: {0}", id));
   }
});

通常，我在这个范围内完成所有工作，但我有一个案例，我想调用 Foo(27)来自由独立 JQuery 小部件构建的 HREF。 HREF 如下所示：

<a href="javascript:Foo(27)">Click me!</a>

但是，当我单击链接时找不到 Foo() 函数。我怎样才能做到这样呢？

[编辑]

所以，我刚刚接受了下面的答案，并想分享我的最终实现。 Foo() 已替换为我正在使用的实际方法的名称。是的，我知道 String.format() 本身并不存在；它是我自己的基础库的一部分。考虑到这一点，这就是我所得到的。这是来自我定义所有全局命名空间的文件。此定义存在于 jQuery 范围之外。

// This is defined in the global namespace
if (typeof (window.App) === "undefined")
{
   window.App = {};
}

这是构建 HREF 的 jQuery 小部件中的行。标题用于预测，HREF 导航到该预测的详细信息页面：

r = String.format('<a href="javascript:App.NavDetails({1});" class="link3">{0}</a>',
   Predikt.General.EncodeHtml(options.rowData.Title), 
   options.rowData.PredictionId);

下面是我的 $(window).load() 范围的 jQuery 文件中 NavDetails 函数的实际实现：

$(window).load(function ()
{
   App.NavDetails = function (id)
   {
      // Do something interesting with the ID here...
      alert(String.format("The ID is: {0}", id));
   };
});

Answer 1

你可以这样做

$(window).load(function (){
    window.Foo =  function(n){
      alert(n);
   }
});

http://jsfiddle.net/JQn8H/

或者这个

var Foo;

$(window).load(function (){
    Foo =  function (n){
      alert(n);
   }
});

http://jsfiddle.net/JQn8H/2/

IMO，更好的方法是为您的应用程序设置一个命名空间，所以你不会污染全球命名空间

window.App = {};

$(window).load(function (){
   App.Foo =  function (n){
      alert(n);
   }
});

然后，在你的html中你可以调用它：

<a href="javascript:App.Foo(27)">Click me!</a>

http://jsfiddle.net/ JQn8H/3/

但是，您可能需要考虑从脚本而不是标记中调用它。

Answer 2

您必须在在该范围内工作和拥有这样的可访问功能之间做出选择。唯一的其他选择是强制重新加载或将其绑定到锚点的单击处理程序。

另外，您可能已经更改了原型，但除非您更改了，否则 String.format 不起作用。您可能只想执行 "Do Foo for: " + id

function Foo(id) {
  alert("Do Foo for: " + id);
}
$(window).load( ... );

或

<a class="someClass" data-id="23">Click me!</a>

...

$(window).load(function() {
  $("a.someClass").click(function() {
    alert("Do Foo for: " + $(this).data("id"));
  });
});

Answer 3

将 Foo 函数移到 $(window).load() 函数之外，或者将 Foo 绑定到 <加载函数内的 /code> 元素。您无法从外部进入 $(window).load() 回调。

---

从您的评论看来，您需要 Foo 留在您的 $(window).load() 匿名函数中，因为它需要访问该范围内的其他内容。您可以通过将对 Foo 的引用移到匿名函数之外来解决此问题。 jm- 方法的这种变体：

$(window).load(function() {
    //...
    function Foo() {
        //...
    }
    //...
    window.Foo = Foo;
});

这会在 中留下对 Foo 的引用>window 对象，并且由于 window 是默认范围，因此您应该能够在 元素中访问它。