web-dev-qa-db-fra.com

jquery: appelle la fonction par son nom lors du changement de sélection

J'essaie d'appeler une fonction par le nom .onchange d'une sélection, mais rien ne se passe. Lorsque la fonction est décrite après l'attribut, cela fonctionne.

CECI NE FONCTIONNE PAS

HTML:

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

SCÉNARIO:

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

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

CELA MARCHE

HTML:

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

SCÉNARIO:

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

MODIFIER:

Ok, pour tous ceux qui m'ont dit d'inclure la fonction sur le même script. Cela n'est pas possible car la fonction testMessage() se trouve dans un script .js externe inclus dans le <head> du code HTML.

javascriptjqueryfunction
11
Perocat

C'est parce que le gestionnaire testMessage n'est pas défini lors de sa liaison à l'événement change.

Cela devrait fonctionner si c'était dans le même contexte de script que ci-dessous,

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

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

Le code à l'intérieur de <script></script> est exécuté un par un en commençant par le début et la fonction testMessage n'existe pas dans le premier <script></script>. 

Vous avez quelques options ici,

  1. Placez-le dans une fonction anonyme qui permettra à votre script de résoudre la fonction testMessage ultérieurement. [Comme suggéré dans Optimus Prime answer]

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

  2. Incluez le script qui a la fonction testMessage au-dessus de script qui lie le testMessage comme ci-dessous,

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

Au lieu d'essayer,

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

Jsfiddle de travail Essayez ceci:

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

Essayez ceci et placez-le dans la même balise de script:

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

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

Je ne pense pas que votre référence à la fonction existe encore Voici deux manières de le faire ..___ Je suggère la version en espacement des noms, car elle pourrait aider à nettoyer votre code en général.

HTML:

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

SCÉNARIO:

// Namespaced et utilisant un proxy

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

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

// vient d'être déclaré

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

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

Si votre méthode est dans un autre fichier, assurez-vous d'inclure ce fichier avant celui avec la liaison d'événement. Recevez-vous des erreurs de console?

0
BillPull

Vous devez définir un rappel sur la fonction de modification.

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

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

Cela devrait résoudre votre problème.

0
Matthew R.