Sometimes loading JavaScript

I'd like to conditionally load a set of javascript functions (which involve jQuery) on a given page.

The situation is that our site has a bunch of stuff that happens on $(document).ready (mostly fancy menu setup and a couple of CSS class manipulations), but one or two pages need more setup. It's enough code (and specific enough) that I don't want to just toss it into the main file, but rather just load it on those specific pages.

It seems that I can't do this by just loading a new file specific.js into those pag开发者_JAVA技巧es that contains

(function () {
   $(something).click(function () { Stuff(happens); });
   something(Else);
   ...
 } ());

In the above example, something(Else); works fine, but .click and .bind don't seem to do anything. What I ended up doing is

function specificStuff () {
   $(something).click(function () { Stuff(happens); });
   something(Else);
   ...
};

and adding if(specificStuff) specificStuff(); to the main js file. It works, but it seems like there should be a better way of accomplishing this (ideally one that would keep all the changes in specific.js and not touch the general settings).

Is there a canonical way of conditionally loading js code to run in document.ready?

---

You can call $(document).ready(); multiple times in a web page/script file. Just wrap your jquery bindings as such in your specific.js file:

$(document).ready(function(){ $(something).click(function () { Stuff(happens); }); something(Else);});

---

You can load the page specific Javascript in the html of those pages, each script with its own document.ready function.

---

try removing the () when passing a function to document.ready:

(function () {
   $(something).click(function () { Stuff(happens); });
   something(Else);
   ...
 } **()**);

with the (), it will execute right away and not wait for the document to be ready.

---

You can call the jquery document ready function as many times as you need. I think your issue is with how you've set up your function. If you're trying to call the ready function, it should be like this:

$(function () {
   $(something).click(function () { Stuff(happens); });
   something(Else);
   ...
});

Also, if the something elements are created by your main.js file, you should include it before your specific.js file.