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

Question

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

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

通常，我在此范围内完成所有工作，但我有一个案例，我想从由独立 JQuery 小部件构建的 HREF 调用 Foo(27)。 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()-scoped 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 绑定到加载函数内的 <a> 元素。您无法从外部进入您的 $(window).load() 回调。

---

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

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

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