selektor id jQuery działa tylko dla pierwszego elementu

Question

Mam 3 przyciski o tym samym id, potrzebuję uzyskać każdą wartość przycisku, gdy jest on kliknięty.

<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button> 
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button> 
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button> 

Oto mój obecny jQuery scenariusz:

$("#xyz").click(function(){ 
     var xyz = $(this).val(); 
     alert(xyz); 
}); 

Ale to działa tylko dla pierwszego przycisku, klikając na inne przyciski są ignorowane.

Answer 1

mam 3 przyciski z tego samego id ...

Masz nieprawidłowy kod HTML, nie może mieć więcej niż jeden element strony z tego samego id.

Quoting the spec:

7.5.2 Element identyfikatorów: identyfikator i klasy atrybutów

id = nazwa [CS]
Ta cecha nadaje nazwę elementu. Ta nazwa musi być unikalna w dokumencie.

Rozwiązanie: zmiana z id do class,

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button> 
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button> 
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button> 

I kod jQuery:

$(".xyz").click(function(){ 
    alert(this.value); 
    // No need for jQuery :$(this).val() to get the value of the input. 
}); 

Ale to działa tylko dla pierwszego przycisku

jQuery #id selektor docs:

Każda wartość id musi być użyty tylko raz w dokumencie. Jeśli więcej niż jeden element ma przypisany ten sam identyfikator, zapytania korzystające z tego identyfikatora będą wybierać tylko pierwszy dopasowany element w DOM. Tego zachowania nie należy jednak polegać; dokument z więcej niż jednym elementem korzystającym z tego samego identyfikatora jest nieprawidłowy.

Jeśli spojrzeć na źródła jQuery można zobaczyć podczas rozmowy $ z selecor- ID ($("#id")) jQuery zwraca rodzimą javascript document.getElementById funkcję:

// HANDLE: $("#id") 
} else { 
    elem = document.getElementById(match[2]); 
} 

choć w spec z document.getElementById nie wspomnieli, że musi zwrócić pierwszą wartość, tak większość (być może wszystkich?) Przeglądarek zaimplementowała.

DEMO

Answer 2

ID oznacza "identyfikator" i jest ważna tylko raz w dokumencie. Ponieważ Twój kod HTML jest w tym momencie nieprawidłowy, niektóre przeglądarki wybierają pierwszy, inny ostatni element z tym identyfikatorem.

Zmień identyfikatory na nazwy byłoby dobrym krokiem.

Następnie użyj $('button[name="xyz"]').click(function(){

Answer 3

Nie można mieć tego samego identyfikatora ponieważ id jest unikatowa w widoku HTML. Zmień go na klasę lub inną nazwę atrybutu.

$('attributename').click(function(){ alert($(this).attr(attributename))}); 

Answer 4

Z mojego doświadczenia wynika, że ​​jeśli użyjesz selektora $('button#xyz'), zadziała. To jest hack, ale nadal jest nieprawidłowy HTML.

Answer 5

Chociaż zmiany identyfikatora do klasy jest lepiej, można uzyskać wszystkie elementy z tego samego identyfikatora pomocą attribute equals selector:

$('[id="xyz"]') 

albo to, aby uzyskać przyciski tylko z id xyz:

$('button[id="xyz"]') 

Albo div z id xyz:

$('div[id="xyz"]') 

itp

Alternatywnie można użyć "Attribute Contains Selector" aby uzyskać wszystkie elementy z identyfikatorami, które zawierają „xyz”:

$('[id*="xyz"]') 

Oczywiście, oznacza to, że wszystkie elementy z id, które częściowo zawierają „xyz” dostanie wybrane przez to.

Answer 6

to również działało, jeśli masz wiele elementów o tym samym id.

$("button#xyz").click(function(){ 
    var xyz = $(this).val(); 
    alert(xyz); 
}); 

można sprawdzić HERE