web-dev-qa-db-fra.com

Uncaught SyntaxError: Impossible d'exécuter 'querySelector' sur 'Document'

'<button id="'+item['id']+'" class="btnDeactivateKeyInChildPremiumCustomer waves-effect waves-light>ok</button>'

J'ai utilisé le code ci-dessus pour générer le bouton à l'intérieur de jQuery chaque fonction. Le bouton créé dynamiquement et lorsque j'ai cliqué sur le bouton, il devrait afficher la progression sur le bouton. J'utilise ceci Ladda Button Loader .

    btnDeactivateKeyInChildPremiumCustomerClick : function(event){
        var id = event.currentTarget.id;
        var btnProgress = Ladda.create(document.querySelector('#'+id));
//btnProgress.start(); or //btnProgress.stop();
    }

Et puis j'ai passé le bouton le gestionnaire d'événements attrape le processus d'événement de la fonction ci-dessus. À l'intérieur de cette fonction, il créera un objet btnProgress . Après cela, je peux appeler les fonctions start () ou stop (). J’ai travaillé avec succès dans le cas d’un seul bouton sans créer le bouton dynamiquement à l’intérieur de chaque. Mais dans chaque cas, il affiche des erreurs lors de l'exécution de var btnProgress = Ladda.create (document.querySelector ('#' + id));;

Erreur 

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '#22' is not a valid selector.
javascriptjquerybackbone.js
29
boycod3

Vous êtes autorisé à utiliser identifiants commençant par un chiffre dans vos documents HTML5:

La valeur doit être unique parmi tous les ID de la sous-arborescence de base de l'élément et doit contenir au moins un caractère. La valeur ne doit contenir aucun espace.

Il n'y a pas d'autres restrictions sur la forme que peut prendre un identifiant; en particulier, les identifiants peuvent être constitués uniquement de chiffres, commencer par un chiffre, commencer par un trait de soulignement, ne comporter que de la ponctuation, etc.

Mais la méthode querySelector utilise des sélecteurs CSS3 pour interroger le DOM et CSS3 ne prend pas en charge les sélecteurs d’ID commençant par un chiffre:

En CSS, les identifiants (y compris les noms d’élément, les classes et les identifiants dans les sélecteurs) ne peuvent contenir que les caractères [a-zA-Z0-9] et ISO 10646 caractères U + 00A0 et supérieurs, plus le tiret (-) et le trait de soulignement ( _); ils ne peuvent pas commencer par un chiffre, deux traits d'union ou un trait d'union suivi d'un chiffre.

Utilisez une valeur comme b22 pour l'attribut ID et votre code fonctionnera.

Puisque vous voulez sélectionner un élément par ID, vous pouvez aussi utiliser .getElementById méthode:

document.getElementById('22')
60
undefined

Bien que cela soit valide en HTML, vous ne pouvez pas utiliser un ID commençant par un entier dans sélecteurs CSS.

Comme indiqué, vous pouvez utiliser getElementById à la place, mais vous pouvez également obtenir le même résultat avec un querySelector:

document.querySelector("[id='22']")
10
CodingIntrigue