Wann muss eine Funktion in $ (document) .ready () stehen?

Ich verstehe es einfach nicht. Ich habe gesucht und gesucht, aber dafür kann ich einfach nicht herausfinden, was "richtig" ist.

Es gibt drei Beispiele.

1)Geige 1.0 Hier haben wirhtml mitonlick="function" und dasjavascript genau dort auch funktionieren, was gut funktioniert

 <span class="classic one"   onclick="someFunction(this,'one')">CLICK HERE</span>

 <script type="text/javascript">
    function someFunction(obj,nr) {
        var string = $(obj).attr('class');
        $('.result').text( string );
    }
</script>

2)Geige 2.0 Wenn ich dann die Funktion in den Skriptabschnitt verschiebe (in die .js-Datei), erhalte ich die Fehlermeldung "ReferenceError: someFunction is not defined"

Hier beginnt die Frage

3)Geige 3 Jetzt habe ich eine Funktion in document ready, die mit .on aufruft (click, was immer funktioniert. Diese Funktion ruft eine andere Funktion auf, die sich außerhalb von docuemnt.ready () befindet und auch funktioniert.

Also die Frage. Wann muss ich die Funktionen definieren, bei denen UND WARUM das immer funktioniert?

Vielen Dank!

Der gesamte Code aus Beispiel 3) sieht folgendermaßen aus:

<div class="result">result</div>

    <span class="classic one"   onclick="someFunction(this,'one')">CLICK HERE</span>
    <span class="classic two"   onclick="someFunction(this,'two')">CLICK HERE</span>
    <span class="classic three" onclick="someFunction(this,'three')">CLICK HERE</span>
    <span class="classic four"  onclick="someFunction(this,'four')">CLICK HERE</span>

<div class="ready">ready</div>


<span class="callOtherFunction">Call other function</span>


<script type="text/javascript">
    $(document).ready(function(){
        $('.ready').text( 'dom is ready' );

        function someFunction(obj,nr) {
                var string = $(obj).attr('class');
                $('.result').text( string );
            }

         $( "span.callOtherFunction" ).on({
            click: function() {
                $(this).css("color","red");
                $(this).addClass("xyz");
                otherFunctionCallingFunction($(this));
            }
        });

    });

    function otherFunctionCallingFunction($me) {
        $('.callOtherFunction').append( ' --> ' + $me.attr('class') );
    }
</script>

Antworten auf die Frage(2)

Ihre Antwort auf die Frage