jQuery-Funktion beim Laden ausgeführt, wenn eine Variable übergeben

Question

Ich versuche herauszufinden, wie Variablen an jQuery-Funktionen übergeben, aber ich bin nicht in der Lage, warum dieses (stark vereinfachte) Beispiel nicht wie vorgesehen funktioniert. Die Idee ist, dass eine Warnung angezeigt wird, wenn das Kontrollkästchen angeklickt wird.

Kein Problem hier:

<input type="checkbox" class="check"/> 

<script> 

    do_alert = function() { 
    alert("Welcome"); 
    } 

    $('.check').change(do_alert); 

</script> 

Wenn jedoch die Warnung Text an die Funktion übergibt, wird die Benachrichtigung, sobald die Seite geladen wird gezeigt, mit dem richtigen Meldungstext:

<input type="checkbox" class="check"/> 

<script> 

    do_alert = function(message) { 
    alert(message); 
    } 

    $('.check').change(do_alert("Welcome")); 

</script> 

Wie geht das:

<input type="checkbox" class="check"/> 

<script> 

    function do_alert(message) { 
    alert(message); 
    } 

    $('.check').change(do_alert("Welcome")); 

</script> 

In beiden Fällen wird die Funktion nicht ausgeführt, wenn Sie das Kontrollkästchen aktivieren, aber es ist eingeschaltet Laden der Seite Was fehlt mir hier?

Answer 1

Der Grund, warum $('.check').change(do_alert); Werke ist, weil Sie einen Verweis auf die do_alert Funktion zum change Ereignishandler sind vorbei, und das Event-Handler do_alert() ausführt, wenn nötig. Der Grund, warum $('.check').change(do_alert("Welcome")); nicht funktioniert, liegt daran, dass Sie die do_alert-Funktion ausführen, anstatt sie in diesem Fall als Referenz zu übergeben. Um Parameter zu übergeben, müssen Sie Ihren Funktionsaufruf in einer anonymen Funktion wickeln, etwa so:

$('.check').change(function(){ 
    do_alert("Welcome"); 
}); 

Was dort passiert ist, dass Sie eine anonyme Funktion (function() { ... }) erstellen, aber Sie ausführen es nicht (weil hinter der Funktionsdefinition keine Klammern stehen). Sie übergeben also einen Verweis auf Ihre anonyme Funktion, die Ihr Event-Handler erwartet.

Answer 2

Sie können diesen Weg versuchen.

$(document).ready(function() { 
 
    
 
    do_alert = function(param) { 
 
    alert(param); 
 
    } 
 
    $('.check').change(function() { 
 
     do_alert("Welcome"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="check"/>