jQuery ID 选择器仅适用于第一个元素

Question

I have 3 buttons with same ID. I need to get each button's value when it's being clicked.

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

Here is my current jQuery script:

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

But it works only for the first button, clicking on the other buttons are being ignored.

Answer 1

I have 3 buttons with same id ...

You have invalid HTML. You can't have more than one element in a page with the same id attribute value.

Quoting the spec :

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 : change from id to 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>

And the 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 selector docs :

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.

If you look at the jQuery source you can see when you call $ with an id selecor-( $("#id") ), jQuery calls the native javascript document.getElementById function:

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

Though, in the spec of document.getElementById they didn't mention it must return the first value, this is how most of (maybe all?) the browsers implemented it.

DEMO

Answer 2

ID means "Identifier" and is valid only once per document. Since your HTML is wrong at this point, some browsers pick the first, some the last occuring element with that ID.

Change ids for names would be a good step.

Then use $('button[name="xyz"]').click(function(){

Answer 3

From my experience, if you use $('button#xyz') selector instead it will work. That's a hack, but it's still invalid HTML.

Answer 4

this also worked if you have multiple element with same id.

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

you can check HERE

Answer 5

If you have same id in a container you can use on() to access each element for every event

 $("#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>

and info about on() is here

Answer 6

You can't have the same id because id is unique in page HTML. Change it to class or other attribute name.

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

Answer 7

Although changing the id's to a class is better, you can get all the elements with the same id using the attribute equals selector :

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

Or this to get only buttons with id xyz:

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

Or divs with id xyz:

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

etc.

Alternatively you could use the "Attribute Contains Selector" to get all elements with ids that contain "xyz":

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

Of course, this means all elements with id that partially contain "xyz" will get selected by this.