it-swarm.com.de

jquery: Funktion nach Namen bei Auswahländerung aufrufen

Ich versuche, eine Funktion mit dem Namen .onchange eines select aufzurufen, aber nichts passiert. Wenn die Funktion nach dem Attribut beschrieben wird, funktioniert sie.

DAS FUNKTIONIERT NICHT

HTML:

<select id="numb">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

SKRIPT:

<script type="text/javascript">
    $('#numb').change(testMessage);
</script>

<script type="text/javascript">
    function testMessage(){
        alert('Hello');
    }
</script>

DAS FUNKTIONIERT

HTML:

<select id="numb">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

SKRIPT:

<script type="text/javascript">
    $('#numb').change(function(){
      alert('Hello')
    });
</script>

BEARBEITEN:

Ok, für alle, die sagten, ich solle die Funktion in dasselbe Skript integrieren. Dies ist nicht möglich, da die Funktion testMessage() in einem externen Skript .js im Code <head> des HTML-Codes enthalten ist.

11
Perocat

Dies liegt daran, dass der Handler testMessage nicht definiert ist, wenn er an das Änderungsereignis gebunden wird.

Es sollte funktionieren, wenn es sich im selben Skript-Kontext befand wie

<script type="text/javascript">
    $('#numb').change(testMessage);

    function testMessage(){
        alert('Hello');
    }
</script>

Code in <script></script> wird nacheinander progressiv von oben ausgeführt und die testMessage-Funktion existiert nicht im ersten <script></script>

Sie haben hier einige Möglichkeiten,

  1. Fügen Sie eine anonyme Funktion ein, mit der Ihr Skript die testMessage-Funktion später auflösen kann. [Wie in Optimus Prime vorgeschlagen Antwort]

    <script type="text/javascript">
      $('#numb').change(function () { 
         testMessage
      });
    </script>
    <script type="text/javascript">
       function testMessage(){
          alert('Hello');
       }
    </script>
    
  2. Fügen Sie das Skript mit der Funktion testMessage über der Variable script ein, die die testMessage wie folgt bindet.

    <script type="text/javascript">
    function testMessage(){
        alert('Hello');
    }
    </script>
    <script type="text/javascript">
      $('#numb').change(testMessage);
    </script>
    
21

Versuchen Sie stattdessen,

<script type="text/javascript">
    $('#numb').change(function(){
       testMessage();
    });
</script>
5
Optimus Prime

Working Jsfiddle Versuche folgendes:

<script type="text/javascript">
    $('#numb').on('change',testMessage);
</script>
2
Zaheer Ahmed

Versuchen Sie dies und platzieren Sie im selben Script-Tag:

<script type="text/javascript">
    $(document).ready(function(){
        $('#numb').change(testMessage);

        function testMessage(){
            alert('Hello');
        }
    });
</script>
1
Jonny Sooter

Ich glaube nicht, dass Ihr Verweis auf die Funktion existiert. Hier gibt es zwei Möglichkeiten, wie Sie dies tun könnten: __ Ich gebe die Namespaced-Version als Vorschlag, da sie den Code generell bereinigen könnte.

HTML:

<select id="numb">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

SKRIPT:

// Namensraum und Verwendung von Proxy

<script type="text/javascript">
    var project = project || {};
    project = {
        testMessage: function (event) {
           alert('Hello');
        }
    };

    $('#numb').change($.proxy(project.testMessage, project));
</script>

// gerade erklärt

<script type="text/javascript">
    function testMessage(){
      alert('Hello');
    }

    $('#numb').change(function(event) {
       testMessage();
    });
</script>

Wenn sich Ihre Methode in einer anderen Datei befindet, stellen Sie sicher, dass Sie diese Datei vor der mit der Ereignisbindung enthalten. Bekommen Sie Konsolenfehler?

0
BillPull

Sie müssen einen Rückruf für die Änderungsfunktion definieren.

<script type="text/javascript">
    $('#numb').change(function(){
        testMessage(); 
    );

    function testMessage(){
        alert('Hello');
    }
</script>

Das sollte dein Problem beheben.

0
Matthew R.