Question

I have this simple function:

<script type="text/javascript">
//<![CDATA[
    jQuery(function($){
        function here(b){alert(b);} ;
        here(6);
    });
//]]>
</script>

and i have this button on page:

<button onclick="here(7);">TEST</button>

The alert fires on page load, but not on button click. If i replace the here(7) with alert, it works fine. Why doesnt it work with function though?

Alan

Answer 1

Because your function is defined within a function, it has a limited scope. To access the function globally, you must define it globally. But, this is not recommended. This is why you use libraries like jQuery, to avoid all the globals and to keep things unobtrusive. The best solution for you would be to change the markup to this…

<button id="myBtn">TEST</button> 

And then assign the click handler programmatically in the same area as your defined function…

<script type="text/javascript"> 
//<![CDATA[ 
    jQuery(function($) { 
        function here(b) { alert(b); };    
        here(6); 

        $("#myBtn").click(function() {
          here(7);
        });
    }); 
//]]> 
</script> 

Behavioral separation is much better, wouldn’t you say?