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

Question

I like to scope all of my JQuery functions and event sinks to $(window).load, like this:

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

Normally, I do all my work at this scope, but I have a case where I'd like to call Foo(27) from an HREF built by a standalone JQuery widget. The HREF looks like this:

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

However, the Foo() function isn't found when I click on the link. How can I make it so?

[EDIT]

So, I just accepted an answer below and wanted to share my final implementation. Foo() has been replaced with the name of actual method I'm using. And yes, I know that String.format() doesn't exist natively; it's part of my own base library. With that in mind, here's what I've got. This is from the file where I define all of my global namespaces. This definition exists outside the jQuery scope.

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

Here's the line from the jQuery widget that builds the HREF. The title is for a prediction, and the HREF navigates to the details page for that prediction:

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

And here's the actual implementation of the NavDetails function in my $(window).load()-scoped jQuery file:

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

Answer 1

You can do this

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

http://jsfiddle.net/JQn8H/

Or this

var Foo;

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

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

IMO, a better approach would be to set a namespace for your app, so you don't pollute the gobal namespace

window.App = {};

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

Then, in your html you would call it:

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

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

But, you might want to consider calling it from your script and not from the markup.

Answer 2

Either move the Foo function outside your $(window).load() function or bind Foo to your <a> element inside the loading function. You can't get inside your $(window).load() callback from the outside.

---

From your comments it looks like you need Foo to stay inside your $(window).load() anonymous function as it needs to access other things in that scope. You can work around this by moving a reference to Foo outside the anonymous function. This variant of jm-'s approach:

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

This leaves a reference to Foo in the window object and since window is the default scope, you should be able to access it in your <a> element.

Answer 3

You have to choose between doing work at that scope and having a function accessible like that. The only other alternative is to force a reload or to bind it to the anchor's click handler.

Also, you might have changed prototype, but unless you have, String.format doesn't work. You probably just want to do "Do Foo for: " + id

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

or

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

...

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