JQuery Function is not defined in scripts file

Question

apparently my jquery function is not defined. I have no idea why. I am calling jquery before the scripts file so thats not the case and the jquery was working fine before I put it in the function.

(function ($) {

function selectCharacter(){
    $('select.character_select').change(function(){

        alert('Select field value has changed to' + $('select.character_select').val());



    });
}

})(jQuery);


selectCharacter();

Answer 1

This is a scope issue. function creates a new scope. So, you're trying to invoke a private variable to your function outside of your function. You can fix this by changing where you invoke the function:

(function ($) {
    function selectCharacter() {
        $('select.character_select').change(function() {
            alert('Select field value has changed to' + $('select.character_select').val());
        });
    }       
    selectCharacter();
})(jQuery);