J'ai construit mon script en javascript, puis j'ai décidé de le convertir en jQuery pour simplifier les fonctionnalités futures. Lorsque j'ai ajouté le .ready autour de mon script, ma fonction n'est plus visible. D'après ma compréhension du fonctionnement de .ready, son contenu ne devrait se déclencher qu'après la création du DOM. Je m'attendrais donc à voir le résultat de console.log (userInput) - J'ai retiré la plupart du code à des fins d'exemple. Mais lorsque j'exécute le programme, Firebug affiche "ReferenceError: getInput n'est pas défini".

Voici mon html:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="script/script.js"></script>
</head>
<body>
    <form>
        Input: <input type="text" name="userInput" id="userInput" autofocus><br>
        <input type="button" value="Submit" name="Submit" onclick="getInput()">
    </form>
</body>
</html>

Voici mon script:

    $(document).ready(function() {
        function getInput() {
            var userInput = $('#userInput').val(); 
            console.log(userInput);
        }
    });

Si je supprime la fonction .ready, tout fonctionne comme prévu mais je ne sais pas pourquoi il y a un conflit. J'ai lu cet article (Que garantit exactement $ (document) .ready? ) qui mentionne l'ajout d'une fonction de chargement, ce que j'ai tenté, mais j'ai toujours la même erreur.

Pourquoi provoque-t-il déjà un conflit? Je n'en ai pas besoin mais ça n'a toujours pas de sens pour moi. Quelqu'un peut-il expliquer quel est le problème ou me diriger vers un article qui l'explique?

0
RunzWitScissors 7 août 2016 à 18:33

5 réponses

Ils sont dans un contexte différent. C'est-à-dire que l'onclick la regarde dans le contexte global, tandis que la fonction est définie à l'intérieur de la fonction .ready sans nom. Soit liez votre gestionnaire de clics à l'intérieur du fichier .ready, soit définissez votre fonction en dehors de celui-ci.

0
Elentriel 7 août 2016 à 15:37

Je crée un JsFiddle pour vous. J'y ai apporté quelques modifications et au lieu d'ajouter l'événement onclick à votre bouton, j'ai ajouté l'écouteur dans le javascript.

Le problème vient du fait que vous liez l'écouteur dans votre HTML mais le recherchez dans votre jquery. Vous pouvez soit créer la fonction en dehors du .ready () qui, selon vous, a fonctionné pour vous, soit lier l'événement dans jQuery comme ci-dessous.

<body>
<form>
    Input: <input type="text" name="userInput" id="userInput" autofocus><br>
    <input type="button" value="Submit" name="Submit" id="submit">
</form>
$(document).ready(function() {
    $('#submit').on('click', function(){
        alert($('#userInput').val());
    });
});

Violon: https://jsfiddle.net/uj981130/

Meilleure

0
vegas2033 7 août 2016 à 15:48

Vous pouvez réaliser ce que vous voulez, en modifiant un peu votre code html et js.

$(document).ready(function() {
    // attach an even handler for the click event
    // on the elements that have the class js-submit
    $('.js-submit').click(function(){

        // get the value of the input.
        var userInput = $("#userInput").val();

        console.log(userInput);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
        Input: <input type="text" name="userInput" id="userInput" autofocus><br>
        <input type="button" value="Submit" name="Submit" class="js-submit">
    </form>
1
Christos 7 août 2016 à 15:37

Vous définissez la fonction dans la fermeture document.ready qui a sa propre portée, donc lors de l'exécution de votre fonction avec l'attribut onclick ne fonctionnera pas. parce que ce n'est pas dans la portée mondiale. Au lieu de cela, liez simplement votre fonction avec window pour qu'onclick puisse la trouver. utilisez ceci

$(document).ready(function() {
    window.getInput = function() {
        var userInput = $('#userInput').val(); 
        console.log(userInput);
    }
});

Ou vous pouvez obtenir la même chose en utilisant jquery qui est recommandé

Input: <input type="text" name="userInput" id="userInput" autofocus><br>

<input type="button" value="Submit" name="Submit" id="submit-button">

$(document).ready(function() {
    $("#submit-button").click(function() {
        var userInput = $("#userInput").val();
        console.log(userInput);
    });
});
0
Zayn Ali 7 août 2016 à 15:44

La portée de la fonction est limitée par le rappel de la fonction prête pour le document. Vous devez donc le référencer via une variable accessible globalement:

MyModule = {}; 
$(document).ready(function() {
    MyModule.getInput = function() {
        var userInput = $('#userInput').val(); 
        console.log(userInput);
    }
});

Vous pouvez désormais y accéder via MyModule.getInput

Et pour autant que je puisse voir, il n'est pas nécessaire de mettre cette fonction sous document prêt.

0
Arun Ghosh 7 août 2016 à 15:38