La función jQuery click solo funciona en el primer elemento

Question

Tengo problemas con jQuery.

Estoy haciendo un CMS simple y en la interfaz tengo una lista de páginas, en cada elemento de la lista hay un enlace de edición. Hice jQuery escuchar los clics con esa id de edición. A continuación, observará el LI de los padres para ver qué ID tiene para que el usuario pueda guardar los cambios en la ID de la página correcta en la base de datos.

Mi Lista

<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> 

Y el javascript

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

Pero sólo los primeros trabajos de edición de enlaces. Todos los demás solo son ignorados. Puede ver el problema trabajando aquí, http://info.radio-onair.ath.cx/active/scms/admin/pages/test.html

Gracias de antemano.

Answer 1

En HTML, id se refiere a un identificador único . En otras palabras, es contrario a los estándares tener 2 elementos con el mismo id. jQuery aquí se comporta correctamente.

Utilice un class en lugar de un id para identificar sus etiquetas tales como:

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")); 
     }) 
}); 

---

Alternativamente, dado que la etiqueta padre ya parece tener una clase única, simplemente puede usarla para apuntar a las etiquetas deseadas. Esto reduciría lo que llamo "ruido de clase" (la definición de clase inútil para elemento objetivo que podría ser el objetivo de los atributos únicos de sus padres).

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")); 
     }) 
}); 

Answer 2

No puede tener dos elementos con la misma ID. Eso es HTML no válido. Tal vez quieres una clase en su lugar?

Probar:

<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>  

Answer 3

ID deben ser únicos, mientras que los nombres de clase pueden ser el mismo.

Answer 4

Probé su enlace y parece que todas las alertas están cableados y funciona correctamente, pero no en orden secuencial (2 es 5, etc)

Answer 5

creo que esto se debe a que el uso usar el mismo Identificación para cada elemento. Intenta usar una clase en su lugar.

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

Y luego

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

Answer 6

Si no quiere cambiar el código HTML (pero debería), puede intentar esto:

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

Answer 7

No tengo idea de lo que todos se dijo, pero me acaba de cambiar un

<a id="anyidname".. 

de caja de lujo ... a este script al final de mi página html/php ... y la etiqueta de

<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>"