Jquery: how to register an event on all pages?

Question

I want to run the following jquery code on every page in my website.

$(document).ready(function(){     
    $("#more").click(function(){
     $("#morediv").slideToggle("slow");
     return false;
    });
});

In all my pages I have the more and morediv elements defined, for every page I have different js file and adding this code in every file will not be a good solution (I suppose).

I have created a global.js to include this code, but in other pages also I have the $(document).ready(function(){} function defined and may be that's why its conflicting and not running properly.

Answer 1

having $(document).ready() event handler in global.js and the page it is included in does not poses any problem I'm using it and it works really fine.

Answer 2

You can have multiple $(document).ready(function(){}) elements on your page, so that it's the problem. I suggest using Firefox/Firebug and examining any console errors you find to discover the problem. Perhaps your global.js file is being loaded before jQuery itself? Otherwise, you'll need to dig into it with Firebug's debugger.

Answer 3

Are you actually doing some server-side programming or you are talking about plain HTML pages. I would advise that you have templates (this is specific to your development environment and tools of choice) and include the JS in those templates. Then the actual pages will all use the template and have the JS available. The question you are asking has in fact nothing to do with Javascript or JQuery, but the way you organize your site... unless I'm missing something.

Answer 4

Just a guess, but are you referencing the location of the global.js file correctly?

To be sure, write something like the following into your global script:

$(document).ready(function(){                   

    alert("document ready");

    $("#more").click(function(){
        $("#morediv").slideToggle("slow");
        return false;
    });
});

If you don't get the alert the script is not pathed correctly, or is not placed after the jquery include (or the jquery include is not pathed properly).