jQuery和onclick html函数回调

Question

Let's say we have like 3 functions:

// Notice there are no $(document).ready function
function third(par)
{
    // uses jQuery.fadeIn() and jQuery.fadeOut()
}

function second()
{
    // do normal javascript
    third('Something')
}

function main()
{
   var response = $.ajax() // an ajax call with jQuery
}

Now let's take a look at an HTML page

<button onclick="main()">Click me, please</button>

It seems that functions define inside $(document).ready are unavailable out side, so main() will be undefined if putted inside $(document).ready I've checked the actions of each function with FireBug and i can tell you this:

• The main() function is called and the ajax call called returning the right data.
• The second() function is called successfully
• The third() function is called but an error occur: fadeIn() is not defined as any other jQuery functions.

My question is: what should i do to attach a jQuery function to an HTML onclick event caller?

Answer 1

$ ('button').click(main); inside document ready

or

var main;

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