I have a function defined inside a $('document').ready.

$('document').ready(function() {
  function visit(url) {
    $.ajax({
      url: url,
      container: '#maincontainer',
      success: function(data) {
        init();
      }
    });
  }

  function init() {
    ...
  }
)};

But when I call init() in Chrome Console I get : ReferenceError: init is not defined.

Update: Thank you all for your help. I didwindow.init = init; and it works perfectly.

I have a function defined inside a $('document').ready.

$('document').ready(function() {
  function visit(url) {
    $.ajax({
      url: url,
      container: '#maincontainer',
      success: function(data) {
        init();
      }
    });
  }

  function init() {
    ...
  }
)};

But when I call init() in Chrome Console I get : ReferenceError: init is not defined.

Update: Thank you all for your help. I didwindow.init = init; and it works perfectly.

• javascript
• ajax
• pjax

• I don't understand the sense of defining a (non-anonimous) function inside the ready method. Just declare them outside and then call it when and where you need. – Aurelio De Rosa Commented Feb 13, 2012 at 22:53
• 1 That should work. Are you sure it's not var a = function init() { }? Also, your code example should end with }), not )}. – alex Commented Feb 13, 2012 at 22:54
• 1 This shouldn't work. The Chrome Inspector console has no access to the state within an anonymous closure. – Twisol Commented Feb 13, 2012 at 23:01
• @AurelioDeRosa: There are lots of reasons for creating named functions within the ready. Chief amongst them is if the rest of your code is only going to be used once the DOM is ready, it's a handy scoping container. – T.J. Crowder Commented Feb 13, 2012 at 23:05
• 2 I forgot to read the last sentence. I shall go back to work now... :P – alex Commented Feb 13, 2012 at 23:11

5 Answers 5

Your init function is contained by the scope of the function you've passed to jQuery.ready. This is a good thing, it means you haven't created an unnecessary global.

If you need to export the function to the global scope, you can do so by explicitly assigning to a property on window, e.g.:

window.init = init;

Since window is the global object on browsers, that would allow you to call it from Chrome's console without the window. prefix. But only do that if absolutely necessary, the global scope is already crowded enough.

Function declarations, like your function init() {}, are restricted to the scope they're defined in. If you want to use init elsewhere, do this:

var init;
$('document').ready(function() {
    init = function() {};
});

I think you want to put your function definition outside the ready function, it is not necessary for the document to be ready to define a function even if the function references the document. Keep in mine the references inside a function are not performed until the function is actually executed, a function definition is just like defining a text constant. Use the following instead:

function visit(url) {
    $.pjax({
        url: url,
        container: '#maincontainer',
        success: function(data) {
        init();
        }
    });
}

function init() {
    ...
}

$(function () {
    init();
});

Try something like this:

$('document').ready(function() {

  var objScope = this;

  function visit(url) {
    $.pjax({
      url: url,
      container: '#maincontainer',
      success: function(data) {
        objScope.init();
      }
    });
  }

  function init() {
    ...
  }
)};

Functions are only defined the scope you define them in.

If you insist on this method, use init = funciton() syntax instead. This will create a global variable (since you're not going to put a var there) which can be referenced anywhere.

That said, defining functions can be done at any time, there is absolutely no point in putting them in .ready().