jQuery tıklama işlevi yalnızca ilk eleman üzerinde çalışır

Question

jQuery ile ilgili bir sorun yaşıyorum.

Basit bir CMS yapıyorum ve arayüzde sayfalar listesi var, her liste öğesinde bir düzenleme bağlantısı var. JQuery'yi bu düzenleme kimliğiyle yapılan tıklamaları dinledim. Daha sonra, kullanıcı kimliklerini veritabanında sağdaki sayfaya götürebilmek için hangi kimliğe sahip olduğunu görmek üzere üst LI'ya bakacaktır.

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

Ve javascript

Ama sadece ilk düzenleme bağlantısı çalışmaları

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

. Diğerleri göz ardı edilir. Burada çalıştığınız sorunu görebilirsiniz, http://info.radio-onair.ath.cx/active/scms/admin/pages/test.html

Önceden teşekkürler.

Answer 1

, id bir benzersiz tanımlayıcı ifade eder. Başka bir deyişle, aynı id ile 2 elemente sahip olmak standartlara aykırıdır. jQuery burada doğru şekilde davranır.

kullanın class yerine bir id gibi sizin etiketleri tanımlamak için:

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

---

Alternatif olarak, ebeveyn etiketi zaten benzersiz bir sınıfa sahip olduğu için, onu istenen etiketleri hedeflemek için kullanabilirsiniz. Bu, "sınıf gürültüsü" dediğim şeyi azaltacaktır (yararsız sınıfın, ebeveynlerinin benzersiz özellikleri tarafından hedeflenebilecek olan hedef öğeye tanımlanması).

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: HTML'nizi değiştirmek istemiyorum (ama yapmanız gerekir) Eğer

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

Answer 2

Aynı kimliğe sahip iki öğeniz olamaz. Bu geçersiz HTML. Belki bunun yerine bir sınıf istersiniz?

Dene: sınıf adları aynı olabilir iken

<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

kimlikleri, benzersiz olmalıdır.

Answer 4

Ben senin bağlantı çalıştı ve uyarıların tamamını değil sadece sırayla (2, vb 5'tir)

Answer 5

Ben kullanılması aynı id kullandığından bu olduğunu düşünüyorum içinde, yukarı kablolu ve düzgün çalıştığından benziyor Her öğe için. Bunun yerine bir sınıf kullanmayı deneyin.

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

Ve HTML'de sonra

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

Answer 6

bu deneyebilirsiniz:

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

Answer 7

Herkesin elinden hiç haberi yok se söyledi, ama sadece benim html/php sayfasının sonunda ... ve

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