Jquery issue,function not defined

Question

I've wrote this code seems correct but appear this error :

Uncaught ReferenceError: show is not defined 

This is my simple code:

(function ($) {
 $(document).ready
 (
 function () {
 $('.mapban').parent().jclip(0, 0, 1060, 750);
 $('#mapplane').draggable();
 $('#mapplane > div ').css( 'display', 'none' );
 $('.button').attr('onclick','show(this)');
 function show(button){
 alert(button);
 }
 }
 )
})(jQuery)

• T.J. Crowder: Why in heaven's name are you trying to set the onclick attribute with jQuery?! You have easy access to the right way to do this (attaching non-exclusive event handlers).

Answer 1

It's not working because the show() function is not in the window scope, it's inside the scope of the document.ready function and the uneccessary IIFE, while the element's onclick handler is trying to call it from the window(global) scope.

Better just use jQuery

jQuery(function($) {
 $('.mapban').parent().jclip(0, 0, 1060, 750);
 $('#mapplane').draggable();
 $('#mapplane > div ').hide();
 $('.button').on('click', show);
 function show(){
 var button = this;
 alert(button);
 }
});

• Stefano Maglione: I've used attr because in function show i nedd to associate to the button pressed another function no_show.I'm trying to make a switch.Do you know how can i do?
• adeneo: You can pretty much get any element or function within an external event handler if you do it right. How exactly to do whatever it is you want to do is impossible to answer without knowing what it is you're trying to do ?
• Stefano Maglione: I have a button and this button on first click must show an element and on second click must hide the element and as soon as
• Stefano Maglione: I'm sorry but before i try toogle i have a problem with your code...the function show is called instantly when the page is loaded and nothing happen if i click on .button
• adeneo: And did you by any chance do $('.button').on('click', show()); and not $('.button').on('click', show); ?

Answer 2

Element attributes like onclick are executed in the global scope. The show function does not exist in the global scope. You need to attach a reference to the function's onclick property, not not a string to its attribute. In jQuery you can do this with the on method (among others):

$('.button').on('click', show);
function show(){
 alert(this);
}

Answer 3

You must declare declare the function show outside of the call to $(document).ready(...);

The way you have it declared now, the scope of the function is limited the execution time of that function and cannot be seen by the page.