Multiple jQuery UI buttons with same ID

Question

There might be a really simple solution to this question, but i just don't see it!

I have a page with a list of items. every item has the same jquery ui button (its inside a dialog and adds that item to a list). i identify the item via the parenting DIV holding the DB id. So far so good...

The Problem is only the first button on the list works! The second, third etc. buttons don't show any reaction at all. The buttons all have the same id - as the list is dynamic and the same action is triggered with every click. Only the parenting ID changes.

Heres the display part:

<div id="2">
  <div id="56">
    <button id="add-audio-file" class="ui-button ui-state-default ui-corner-all">betty_2.mp3</button>
  </div>
</div>

<div id="2">
  <div id="57">
    <button id="add-audio-file" class="ui-button ui-state-default ui-corner-all">betty_3.mp3</button>
  </div>
</div>

And here comes the js Part:

    $('#add-audio-file').click(function() {
        assetID = $(this).parent('div').attr('id');
        pageID = $(this).parent('div').parent('div').attr('id');
        $.post(
            "modules/portfolio/serialize.php", 
            {id : pageID, assetid : assetID, do : "add-audio-file"},
                function(data, textStatus, xhr) {
                    $('#dialog-add-audio').dialog('close');
                }
        );

    });

I am using jquery 1.4.2 and jquery ui 1.8rc3 Any ideas?

Sarfraz · Accepted Answer · 2010-03-17 06:21:11Z

9

The buttons all have the same id

id is identifier for an element, you can not set that for more than one element. Try giving your buttons class instead and see if it works after that.

answered Mar 17, 2010 at 6:21

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kevin · Accepted Answer · 2010-03-17 06:20:44Z

2

Aren't duplicate ID's in a document bad practice?

answered Mar 17, 2010 at 6:20

Kevin

13.2k12 gold badges62 silver badges90 bronze badges

Comments

Paulo · Accepted Answer · 2013-10-18 18:03:08Z

0

This will work when you put button element

in html:

<input type="button" value="MyButton1" /> 
<input type="button" value="MyButton2" />
...
<input type="button" value="MyButtonN" />

in javascript of jquery-ui:

search for: $("#button").button(); 
then replace or add    $('[type="button"]').button();"

ex

$("#button").button();
$('[type="button"]').button();

answered Oct 18, 2013 at 18:03

Paulo

193 bronze badges

Collectives™ on Stack Overflow

Multiple jQuery UI buttons with same ID

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related