Pourquoi mon sélecteur d'ID jQuery ne fonctionne-t-il que sur le premier élément ?

Le sélecteur d'ID jQuery sélectionne uniquement le premier élément : comprendre le problème

Malgré trois boutons avec des identifiants identiques, le sélecteur #id de jQuery ne répond qu'au premier clic sur le bouton. Ce comportement découle d'une règle HTML fondamentale dictant que chaque élément doit avoir un identifiant unique au sein d'un document.

Structure HTML invalide

Le code HTML fourni viole cette règle en attribuant le même ID (" xyz") sur plusieurs boutons. Selon la spécification HTML, "Cet attribut attribue un nom à un élément. Ce nom doit être unique dans un document."

Solution : Convertir en classes

Pour résoudre ce problème, remplacez le Attribut ID avec un attribut de classe pour chaque bouton :

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>

Code jQuery révisé

Avec la structure HTML mise à jour, le code jQuery doit être modifié comme suit :

$(".xyz").click(function(){
    alert(this.value);
    // No need for jQuery $(this).val() to get the value of the input.
});

Comprendre le comportement de jQuery

Le sélecteur #id de jQuery sélectionne uniquement le premier élément avec l'ID spécifié dans le DOM. En effet, la fonction document.getElementById sous-jacente dans le navigateur exécute ce comportement.

Conclusion

En suivant ces directives, vous pouvez gérer efficacement plusieurs éléments ayant le même objectif fonctionnel dans jQuery, en vous assurant que tous les boutons répondent aux clics comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!