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

Ответ 1

У меня есть 3 кнопки с одинаковым идентификатором...

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

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

7.5.2 Идентификаторы элементов: атрибуты id и class

id = name [CS]
Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документе.

Решение: измените с 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:

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

Но он работает только для первой кнопки

jQuery #id selector docs:

Каждое значение id должно использоваться только один раз в документе. Если нескольким элементам был присвоен один и тот же идентификатор, запросы, которые используют этот идентификатор, будут выбирать только первый согласованный элемент в DOM. Однако это поведение не следует полагаться; документ с более чем одним элементом, использующим один и тот же идентификатор, недействителен.

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

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

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

DEMO

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

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

вы можете проверить ЗДЕСЬ

Ответ 5

У вас не может быть один и тот же идентификатор, потому что идентификатор уникален в HTML-странице страницы. Измените его на класс или другое имя атрибута.

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

Ответ 6

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

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

Или это, чтобы получить только кнопки с id xyz:

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

Или divs с id xyz:

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

и др.

В качестве альтернативы вы можете использовать "Attribute Contains Selector" , чтобы получить все элементы с идентификаторами, которые содержат "xyz":

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

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

Ответ 7

Если у вас одинаковый идентификатор в контейнере, вы можете использовать on() для доступа к каждому элементу

<div id="containers">

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

</div>

затем используйте on() для каждого события для доступа к одному и тому же идентификатору

 $("#containers").on("click","#xyz",function(){
  alert($(this).val())
  })

$("#containers").on("click","#xyz",function(){
  alert($(this).val())
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="containers">

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

</div>