jQuery Klick-Funktion funktioniert nur am ersten Element

Question

Ich habe einige Probleme mit jQuery.

Ich mache ein einfaches CMS und in der Schnittstelle habe ich eine Liste von Seiten, in jedem Listenelement ist ein Bearbeitungslink. Ich habe jQuery auf Klicks mit dieser Bearbeitungs-ID aufmerksam gemacht. Es wird dann nach dem übergeordneten LI suchen, um zu sehen, welche ID es hat, damit der Benutzer die Änderungen in der richtigen pageId in der Datenbank speichern kann.

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

Und das Javascript

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

Aber nur die ersten bearbeiten Link funktioniert. Alle anderen werden einfach ignoriert. Sie können das Problem hier arbeiten, http://info.radio-onair.ath.cx/active/scms/admin/pages/test.html

Vielen Dank im Voraus.

Answer 1

In HTML, bezieht sich auf eine ideindeutige Kennung. Mit anderen Worten, es ist gegen Standards, 2 Elemente mit demselben id zu haben. jQuery verhält sich hier korrekt.

Verwenden Sie ein class anstelle eines id Ihre Tags als solche identifizieren:

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

---

Da das übergeordnete Tag bereits eine eindeutige Klasse zu haben scheint, könnten Sie es einfach dazu verwenden, um gewünschte Tags zu targetieren. Dies würde das reduzieren, was ich "Klassenrauschen" nenne (das Definieren einer nutzlosen Klasse für ein Zielelement, auf die die einzigartigen Attribute ihrer Eltern abzielen könnten).

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

Sie können nicht zwei Elemente mit derselben ID haben. Das ist ungültiger HTML-Code. Vielleicht möchtest du stattdessen eine Klasse?

Versuchen:

<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

IDs müssen eindeutig sein, während Klassennamen gleich sein können. richtig, nur nicht in der angegebenen Reihenfolge

Answer 4

habe ich versucht, Ihren Link und es sieht aus wie alle Warnungen verdrahtet sind und arbeiten (2 5, etc)

Answer 5

Ich denke, das liegt daran, dass die Verwendung der gleichen -ID verwenden für jedes Element. Versuchen Sie stattdessen, eine Klasse zu verwenden.

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

Und dann

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

Answer 6

Wenn Sie möchten Ihre HTML nicht ändern (aber Sie sollten) Sie können dies versuchen:

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

Answer 7

Ich habe keine Ahnung was jeder el se sagte, aber ich änderte nur ein

<a id="anyidname".. 

von fancy box ... zu diesem Skript am Ende meiner html/PHP-Seite ... und den 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>"