I register a function to a button with onclick attribute, and define this function in $() block(I know it is a bad practice, and it is just an example), when I click the button, an error occurs: Uncaught ReferenceError: hello is not defined. Here is my code:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
function hello(){
alert('hello');
}
});
</script>
</head>
<body>
<input type="button" id="btn" value="click" onclick="hello()"/>
</body>
if I put hello function code out of $() block, it works. I know $() is executed when DOM is parsed, when I click the button, the DOM must already has been parsed, so why it reports an error? Thanks.
2 Answers 2
your code assumes hello is a global function which it is not.
$(function(){
function hello(){
alert('hello');
}
$("#btn").click(hello);
});
1 Comment
There is no difference, except that functions executed (not defined) inside a $.ready block are guaranteed to execute after the DOM is ready to be accessed/manipulated.
Your issue is one of scoping; you've created a local function which isn't accessable at the global scope where your event is being handled.
hellois scoped to the anonymous function you pass to$()so it can't be called from your onclick handler.