Question La fonction de clic jQuery ne fonctionne que sur le premier élément


J'ai des problèmes avec jQuery.

Je fais un simple CMS et dans l'interface j'ai une liste de pages, dans chaque élément de liste se trouve un lien d'édition. J'ai fait en sorte que jQuery écoute les clics avec cet identifiant d'édition. Il examinera alors le LI parent pour voir quel identifiant il a afin que l'utilisateur puisse enregistrer les modifications sur le bon pageId dans la base de données.

Ma liste

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a href="#" id="edit">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a href="#" id="edit">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>

Et le javascript

<script type="text/javascript">
$(document).ready(function() {
    $('a#edit').click(function(){
        alert($(this).parent("li").attr("id"));
    })
});

 

Mais seul le premier lien d'édition fonctionne. Tous les autres sont simplement ignorés. Vous pouvez voir le problème en travaillant ici, http://info.radio-onair.ath.cx/active/scms/admin/pages/test.html

Merci d'avance.


9
2017-07-30 14:18


origine


Réponses:


En HTML, id se réfère à un identifiant unique. En d'autres termes, il est contraire aux normes d'avoir 2 éléments avec le même id. jQuery se comporte correctement ici.

Utiliser un class au lieu d'un id pour identifier vos tags en tant que tels:

HTML:

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a class="edit" href="#">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a class="edit" href="#">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>

JavaScript:

$(document).ready(function() {
        $('a.edit').click(function(){
                alert($(this).parent("li").attr("id"));
        })
});

Sinon, puisque la balise parent semble déjà avoir une classe unique, vous pouvez simplement l'utiliser pour cibler les balises souhaitées. Cela réduirait ce que j'appelle le "bruit de classe" (la définition de la classe inutile à l'élément cible qui pourrait être ciblée par les attributs uniques de leur parent).

HTML:

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a href="#">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a href="#">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>

JavaScript:

$(document).ready(function() {
        $("li.sortable a:contains('edit')").click(function(){
                alert($(this).parent("li").attr("id"));
        })
});

24
2017-07-30 14:23



Je pense que c'est parce que l'utilisation utilise le même id pour chaque élément. Essayez d'utiliser une classe à la place.

<a href="#" class="edit">edit</a>

Et alors

$('a.edit').click(...)

6
2017-07-30 14:22



Vous ne pouvez pas avoir deux éléments avec le même identifiant. C'est du HTML non valide. Peut-être que vous voulez un cours à la place?

Essayer:

<ul id="sortable" class="ui-sortable">
    <li class="sortable" id="listItem_1">
        <a href="#" class="edit">edit</a>
        <span id="title">List item 1</span>
    </li>

    <li class="sortable" id="listItem_2">
        <a href="#" class="edit">edit</a>
        <span id="title">List item 2</span>
    </li>

    etc..
</ul>


<script type="text/javascript">
$(document).ready(function() {
    $('a.edit').click(function(){
        alert($(this).parent("li").attr("id"));
    })
});
</script>       

4
2017-07-30 14:21



Les identifiants doivent être uniques, tandis que les noms de classe peuvent être identiques.


3
2017-07-30 14:21



J'ai essayé votre lien et il semble que toutes les alertes sont connectées et fonctionnent correctement, mais pas dans un ordre séquentiel (2 correspond à 5, etc.)


1
2017-07-30 14:22



Si vous ne voulez pas changer votre code HTML (mais vous devriez), vous pouvez essayer ceci:

$(document).ready(function() {
        $('a:contains("edit")').click(function(){
                alert($(this).parent("li").attr("id"));
        })
});

1
2017-07-30 14:25



Je n'ai aucune idée de ce que tout le monde a dit, mais je viens de changer un

<a id="anyidname".. 

de la boîte de fantaisie ... à ce script à la fin de ma page html / php ... et le tag à

<a rel="anyclassname"..

<script type="text/javascript">
 $(document).ready(function(){
$('a[rel="anyclassname"]').fancybox({
    'width'         : '75%',
    'height'        : '75%',
    'autoScale'         : false,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'type'          : 'iframe'
});
  });
</script>"

0
2018-02-18 18:34