Forum : [jquery] $("#id") ou $(".id") ne fonctionne pas

Réponse acceptée

Parce qu'il vaut mieux attendre que le DOM ait fini de charger avant de faire quoi que ce soit.

D'ailleurs je te conseille de charger les scripts (balise <script> donc) juste avant la fermeture de ta balise <body>, cela permettra à ton DOM d're en partie chargé lorque le navigateur executera ton JS :)

Dernière remarque: je vois que tu charges jQuery via la libraire Google. Je le fais également et il arrive (pour x ou y raisons relatives à Google) que le script ne se charge pas correctement. Je te conseille de le charger en local pour être sûr ;)

Bakar23

1) il ne faut pas oublier le "#" devant ton id
2)Il ne faut pas oublier d'insérer jquery
3)Si tout est ok, montre nous ton code

AminMe

Auteur

Tout d'abord merci d'avoir répondu aussi rapidement
Include Jquery :o ?

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Alors je vais essayer de pas bourriner la page de code : je vais mettre un aperçu :

Index.html

<form id="contactform" method="post" action="action.php">
...
</form>

App.js

(function($){
$('#contactform').css("background-color","red");
})(jQuery);

La ou j'en reviens pas c'est que dans une fonction j'arrive à faire $( '#contactform' )

$(document).submit("#contactform",function(event) {

        /* stop form from submitting normally */
        event.preventDefault();

        /* get some values from elements on the page: */
        var $form = $( '#contactform' ),
            url = $form.attr( 'action' ); // console.log(url) affiche bien 'action.php'
});

Si vous voulez plus de détail j'en rajouterai :)

Bakar23

Je ne comprend pas vraiment la structure de ta fonction, qu'essayes tu de faire ? Sur quel événement travailles tu?

AminMe

Auteur

Alors le but c'était pas trop de mettre de détail ^^' pour pas vous embrouiller

Je vais faire simple : au moment du submit du formulaire par exemple je voudrais mettre le background de ce dernier en rouge

Celà n'a pas de sens réel mais je veux juste comprendre pourquoi quand je met ça dans mon fichier app.js

(function($){
    $('#contactform').submit(function(event) {
        $('#contactform').css("background-color","red"); // ou même this.css(...)

    });
})(jQuery);

Rien ne se passe au submit tandis que si je l'insère sur la console chrome celà fait effet

PS : je tient à rappeler que l'include de JQuery est au dessus et que mon fichier app.js est bien include

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

 <script type="text/javascript" src="app.js"></script>

Pour la question sur l'évènement qu'entends tu par la ?

betaWeb

Essayes avec la fonction jQuery "on()":

$('#contactform').on('submit', function(e) { 
    //... 
});

Es-tu sûr que ton script "app.js" est bien chargé ?

Sinon ce que tu peux faire à la place de ta fonction anonyme, c'est faire un

$(document).ready(function(){
    //...
});

AminMe

Auteur

Je suis sur à 200% qu'il est bien chargé (au passage ta seconde fonction a marché cf tout en bas j'ai une autre question :) !)

Car j'ai fait un alert('OK') dans ma fonction et elle s'affiche bien.

(function($){
    alert('Ok');
      $('#contactform').on('submit', function(e) {
          $('#contactform').css("background-color","red");
      });
    })(jQuery);

Pourtant la couleur ne change pas. Si je colle le MEME code sur la console chrome ça marche

Pourtant sur les tutos Grafikart il ne le met pas dans

le code ci dessous marche

$(document).ready(function(){
$('#contactform').css("background-color","red");
});

Pourquoi chez certains ça marche de le faire directement et chez moi je suis obligé de faire $(document).ready

AminMe

Auteur

Ok merci pour l'explication

Juste ta phrase "D'ailleurs je te conseille de charger les scripts (balise , cela permettra à ton DOM d're en partie chargé lorque le navigateur executera ton JS :)"
Je ne suis pas sur d'avoir retenu le message : je dois les charger ou ? en haut de ma page avec les meta ou en bas ?

Est-il possible de le charger en local & en google ? ou faut faire soit l'un soit l'autre ?

betaWeb

Excuses-moi si je me suis mal exprimé ;)
Tes scripts je te conseille de les mettre en bas de page, juste avant la fermeture de ton body (</body>) et non dans le <head>.

Beh pour ta version de dev, charge-le en local (<script src="js/jquery.min.js"></script> par exemple) et quand tu pushera en ligne et pourra soit le charger va la librairie Google comme tu le fais actuellement, soit garder ton fichier "jquery.min.js", tu me suis ?
Typiquement tu as juste à copier tout le code qui est à cette adresse https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js et à le coller dans un fichier que tu appelleras "jquery.min.js".

AminMe

Auteur

Ok parfait
Déjà en mettant le script tout en bas ça marche beaucoup mieux :) plus besoin de faire document.ready

Oui je comprend totalement : il vaut mieux le mettre en local effectivement.

Juste petite question garder la version 1.11.2 au lieu d'utiliser 2.1.3 n'est pas "mauvais" ? Ou vaut mieux suivre la nouvelle version ?

Après celà je fermerai le sujet (enfin je sais pas comment on fait xD)

betaWeb

Beh vaut mieux prendre la dernière version histoire de ne pas avoir de surprises si tu essayes d'utiliser des fonctions qui n'existeraient qu'après la v1.11.2 ;)

Pour cloturer le topic, aucune idée j'avoue ne l'avoir encore jamais fait ^^

[jquery] $("#id") ou $(".id") ne fonctionne pas

11 réponses