jquery - JavaScript function not called from onclick attribute correctly

Question

IMPORTANT!: I have to use onclick attribute. Using Jquery on event listener/handler is not an option in my case. Why? I have a lot of other things in my code that are dependent on the attribute and its manifestation in the code.

When putting alert in onclick attribute it's working as expected and the alert is shown in a popup window and return false prevents the form from being submitted by pressing the button:

<script>
    $().ready(function() {
        $('.pretty .prettycheckbox').click(function () {

            var myType = $('.pretty .prettycheckbox').find("input[class^=car-type]:checked").val();

            if (myType == 1) {
                $('#sendButton').attr("onclick", "alert('Direct!'); return false;");
            } 

            if (myType == 2) {
                $('#sendButton').removeAttr("onclick");
            }

        });
    });
</script>

But it's not working when calling a function from onclick atttribute like:

<script>
    $().ready(function() {
        $('.pretty .prettycheckbox').click(function () {

            var myType = $('.pretty .prettycheckbox').find("input[class^=car-type]:checked").val();

            if (myType == 1) {
                $('#sendButton').attr("onclick", "submitDB(); return false;");
            } 

            if (myType == 2) {
                $('#sendButton').removeAttr("onclick");
            }

        });
    });
</script>

<script>
    $().ready(function(){
        function submitDB() {
            alert('From function!');
        }
    });
</script>

Any idea why?

Why is the function ignored?

Answer 1

Your code doesn't work because you have a big scope problem. onclick attributes can only target functions that are in the global scope. In your case, your function is not in the global scope.

<script>
    $().ready(function(){
        function submitDB() {
            alert('From function!');
        }
    });
</script>

should be

<script>
        function submitDB() {
            alert('From function!');
        }
</script>

Demo: http://jsfiddle.net/ZeLXY/

I still don't understand why "school" would try to teach how to add onclick attributes using jquery. There's no reason you would EVER want to add onclick attributes to an element with javascript, much less jQuery.