Funkcja kliknięcia jQuery działa tylko na pierwszym elemencie.

Question

Mam problem z jQuery.

Robię prosty CMS, aw interfejsie mam listę stron, w każdym elemencie listy jest link do edycji. Sprawiłem, że jQuery nasłuchuje kliknięć z tym identyfikatorem do edycji. Następnie obejrzy nadrzędny LI, aby zobaczyć, jaki identyfikator ma, aby użytkownik mógł zapisać zmiany w odpowiednim identyfikatorze strony w bazie danych.

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

A javascript

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

Ale tylko pierwsze prace link Edytuj. Wszyscy inni są po prostu ignorowani. Możesz zobaczyć problem działający tutaj, http://info.radio-onair.ath.cx/active/scms/admin/pages/test.html

Z góry dziękuję.

Answer 1

W HTML id odnosi się do unikalnym identyfikatorem. Innymi słowy, wbrew standardom jest posiadanie 2 elementów z tym samym id. jQuery tutaj zachowuje się poprawnie.

Użyj class zamiast id zidentyfikować tagi, takie jak:

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

---

Alternatywnie, ponieważ znacznik nadrzędny już wydaje się posiadać unikalną klasę, można go po prostu użyć do kierowania poszukiwanych znaczników. Spowoduje to zmniejszenie tego, co nazywam "szumem klasy" (definiowanie bezużytecznego elementu class to target, który może być celem unikalnych atrybutów rodzica).

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

Nie możesz mieć dwóch elementów o tym samym ID. To jest nieprawidłowy HTML. Może chcesz zamiast tego klasę?

Spróbuj:

<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

Identyfikatory muszą być unikalne, podczas gdy nazwy klas mogą być takie same.

Answer 4

Próbowałem link i wygląda na to wszystkie alarmy są podłączone i działa prawidłowo, po prostu nie w porządku sekwencyjnym (2 wynosi 5, etc)

Answer 5

Myślę, że to dlatego, że stosowanie używać tego samego id dla każdego elementu. Spróbuj zamiast tego użyć klasy.

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

A potem

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

Answer 6

Jeśli nie chcesz zmienić HTML (ale zalecana) można spróbować to:

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

Answer 7

Nie mam pojęcia, co każdy el se powiedział, ale ja po prostu zmieniły się

<a id="anyidname".. 

z ozdobnym pudełku ... do tego skryptu na końcu mojej stronie html/php ... i znacznika do

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