Селектор идентификатора jQuery работает только для первого элемента

У меня есть 3 кнопки с одинаковым идентификатором, мне нужно получить значение каждой кнопки, когда он нажимается.

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

Вот мой токjQuery сценарий:

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

Но это работает только для первой кнопки, нажатие на другие кнопки игнорируется.

 Kunal Vashist20 июн. 2012 г., 09:27
Вы не можете иметь тот же идентификатор, так как идентификатор уникален, используйте класс вместо идентификатора, это решит ваш случай
 gdoron20 июн. 2012 г., 09:33
Этот вопрос задают здесь очень много раз, поэтому я решил дать емуbig подтяжка лица и написал полный описанный ответ. Надеюсь, это поможет будущим посетителям.

Ответы на вопрос(6)

$('button#xyz') селектор вместо этого будет работать. Это взлом, но это все еще недействительный HTML.

если у вас есть несколько элементов с одинаковым идентификатором.

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

ты можешь проверитьВОТ

 01 мая 2018 г., 19:49
это должен быть правильный ответ!

потому что идентификатор уникален на странице HTML. Измените его на класс или другое имя атрибута.

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

я каждого документа. Так как ваш HTML неверен на данный момент, некоторые браузеры выбирают первый, а некоторые последний встречающийся элемент с этим идентификатором.

Изменение идентификаторов для имен было бы хорошим шагом.

Тогда используйте$('button[name="xyz"]').click(function(){

 20 июн. 2012 г., 09:26
++ 1 тебе тоже!
 01 авг. 2013 г., 07:53
Фактически, если вы просто используете $ ('button [id = & quot; xyz & quot;] "), он будет работать для всех кнопок с таким идентификатором (как и требовался исходный вопрос). Проверено в Chrome.

вы можете получить все элементы с одинаковым идентификатором, используяатрибут равен селектору:

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

Или это, чтобы получить только кнопки с идентификатором XYZ:

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

Или div с идентификатором xyz:

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

и т.п.

В качестве альтернативы вы можете использовать& quot; Атрибут содержит селектор & quot; чтобы получить все элементы с идентификаторами, которые содержат & quot; xyz & quot ;:

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

Конечно, это означает, что все элементы с идентификатором частично содержат «xyz». будет выбран этим.

 10 февр. 2017 г., 14:52
Возможно, $ ('[id = & quot; xyz & quot;] ") недокументировано (кстати, приятно), но атрибут, содержащий селектор, задокументирован, см. Выше: P.
 10 февр. 2017 г., 09:26
На самом деле в прошлый раз, когда я проверил, вы можете даже использовать$('[id="xyz"]') и это будет работать. Но, тем не менее, это недействительный HTML, и его следует исправить независимо от недокументированных хаков.
Решение Вопроса

У вас неверный HTML, у вас не может быть более одного элемента на странице с одинаковымid.

Цитирование спецификации:

7.5.2 Element identifiers: the id and class attributes

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

Solution: меняться отid в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>

ИjQuery code:

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

But it works only for the first button

JQuery#id селектордокументы:

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

Если вы посмотрите на источник jQuery, вы можете увидеть, когда вы звоните$ с идентификатором selecor- ($("#id")), JQuery вызывает нативный JavaScriptdocument.getElementById функция:

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

Хотя вспекуляция изdocument.getElementById они не упоминали, что оно должно возвращать первое значение, именно так большинство (возможно, все?) браузеров реализовали его.

DEMO

 20 июн. 2012 г., 09:31
@gdoron вы получили это innit: P ++ отstack overflow +1 отme брув ++ 1: P
 20 июн. 2012 г., 10:15
Выглядит хорошо для меня :) Может быть, вы можете просто добавить одно предложение в отношении простых методов DOM, чтобы мы могли использовать его в качестве канонического ответа для этого случая (возможно, придется немного подправить вопрос, но я пишу со своего телефона). Не нужно делать это вики-сообществом, вы заслуживаете представителя :)
 Mafaik20 июн. 2012 г., 09:27
Я изменил свой класс на: class = & quot; btn btn-primary xyz & quot; Спасибо за это, это действительно полезно Mafaik
 Mafaik20 июн. 2012 г., 09:24
Спасибо, я попробовал это, и это работает, но с alert (this) .val (); Теперь у меня есть проблема с моим классом кнопки CSS, как вы видите, есть два класса в теге кнопки
 20 июн. 2012 г., 09:24
И это домой бежать с полным ответом! ++ 1

Ваш ответ на вопрос