Defining Javascript/JQuery functions

Question

What is the proper way of defining javascript functions, inside

$(document).ready(function () {
});

or just outside.

What I have is this :

$(function() {
  var html = '<div class ="new1" ><img id = "new2" onclick = "showPage(' + id + 
      ');" class = "' + id + 
      '" src="@Url.Content("~/Images/blankpageQ.jpg")" />' + 
      i + '</div>');
  $(".pageListQuiz")
    .children('div')
    .eq(numOfPages - 1)
    .append(html);

  function showPage() {
    //some actions
  }
});

and clicking on the appended image throws an exception :

Unhandled exception at line 3, column 1 in script block

0x800a1391 - JavaScript runtime error: 'showPage' is undefined

If there is a handler for this exception, the program may be safely continued.

(The js code is embedded from my c# code.). Everything works fine if I place showPage() outside anyway. I just wonder why its not working when I put it inside because I also have functions placed inside that are just working fine.

Depends on what you're wrapping in `ready`. If some code that depends on the DOM, it should be wrapped in `ready()`, other code can be move outside of `ready`. Also, if the JS is included at the end of `` there's no need of `ready`. — Tushar, Mar 08 '16 at 06:45
`$(document).ready` is irrelevant if you're not using jQuery. — Andy, Mar 08 '16 at 06:46
could you give me some examples please. I'm still new to js and is not yet very familiar with it. @Tusher — JanLeeYu, Mar 08 '16 at 06:47
I believe OP means, what is better, write an anonymous function as handler or create a function and pass its reference to event handler. — Rajesh, Mar 08 '16 at 06:48
@JanLeeYu If you declare a function inside `ready()` callback, it will **not** be accessible from outside of the `ready()` callback. If you want to call this from HTML or other places(_outside of `ready`_), move it out of `ready()`. — Tushar, Mar 08 '16 at 07:15
You can also try having a generic handler for all added images. You can add a class say `newImage` and have code `$(document).on("click", ".newImage", function(event){ // Do your stuff here })`. — Rajesh, Mar 08 '16 at 07:18
Thank you for spending time to answer. I really appreciate it. — JanLeeYu, Mar 08 '16 at 07:22
You need to read about scope and context: http://ryanmorr.com/understanding-scope-and-context-in-javascript/ — MrVaykadji, Mar 08 '16 at 07:55

score 1 · Answer 1 · edited May 23 '17 at 12:23

Function delarations are scoped just like var statements.

If you define a function inside another function, then you can only access it within the scope of that function.

If you want to access it as a global (which is what an intrinsic event attribute like onclick= does), then you either need to define it as a global or copy it into the global scope.

In this case, however, you should avoid using globals. You should also avoid using intrinsic event attributes and building HTML by mashing together strings.

This is untested but should give you the idea.

$(function () {

  var id = "something";
  var numOfPages = 2;

  var html = $("<div/>")
    .addClass("new1")
    .append(
      $("<img/>")
        .attr("id", "new2")
        .on("click", showPage.bind(null, id))
        .addClass(id)
        .attr("src", '@Url.Content("~/Images/blankpageQ.jpg")')
    );
  $(".pageListQuiz")
    .children('div')
    .eq(numOfPages - 1)
    .append(html);

  function showPage(id) { 
  }

});

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

@Tushar's Approach

Idea: Create functions and use $(document).ready() to execute necessary functions.

JSFiddle

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

function showPage(el){
  console.log(el);
}

My Approach

Idea: You can have a event handler, instead of setting onclick attribute. Benefit of this approach is, you can have your markup generation logic clean.

JSFiddle

Note, you can merge both approaches. Its better to declare all functions and then use $(document).ready() as an initialization function. This will just call different functions. If you choose to use event handlers/delegates, you can export all events to different file as well and just call it.

score 1 · Answer 3 · answered Mar 08 '16 at 08:46

In your example, you create an <img> element in the HTML of the page. When it is clicked, showPage() is called. Since the function is called from the global scope (as it is called from a click on the HTML, which goes into the global scope), the global scope is looked up for the existence of the showPage() function. However, it does not exist inside the global scope; it exists only in the scope of your $(function() {}) function.

If you want to access showPage() from the global scope, you need to make sure it is available there. You can either do that by defining it outside your $(function() {}) construction (a function declaration creates a new scope), or by defining a var outside your $(function() {}) construction and assigning the showPage() function to that var. For example:

var showPage;

$(function() {
    // Assign the function showPage() to the var showPage:
    showPage = function showPage() {
        // You function body.
    }
});

// showPage is now available in the global scope.

Either solution is OK. Maybe you could read up a bit on Javascript scopes and closures. That will help you understand what's happening here.

Defining Javascript/JQuery functions

3 Answers3

@Tushar's Approach

My Approach